当前位置: 首页 > news >正文

vitepress builld报错

问题:build时报错:document/window is not defined。

背景:使用vitepress展示自定义的组件,之前build是没有问题了,由于新增了qr-code以及quill富文本组件,导致打包时报错。

原因:vitepress官方文档

在这里插入图片描述
在这里插入图片描述
由于使用的第三方组件内部会使用到document和window,vitepress打包的时候,在服务端渲染的情况下没有document和window,就导致的打包报错。

官方的这种两种解决方案,在项目里面试了下还是不行,不知道是不是因为vitepress的版本问题,当前使用的是1.0.0-alpha.13.。由于是内网,没有升级成功,这两种方法就放弃了。

解决方法
在我们封装组件库的地方使用vue的动态组件进行二次的封装。

<template><div v-if="isClient"><component :is="qrCode" v-bind="$attrs"></component></div>
</template>
<script lang="ts" setup>
import {shallowRef,onMounted,ref} from 'vue';
defineOptions({name:'qrCode'})const isClient = ref(false);
const qrCode = shallowRef(null);onMounted(()=>{if (!import.meta.env.SSR){import('./index.vue').then(m=>{qrcode.value = m.default;});isClient.value = true;}
})</script>

相关文章:

vitepress builld报错

问题&#xff1a;build时报错&#xff1a;document/window is not defined。 背景&#xff1a;使用vitepress展示自定义的组件&#xff0c;之前build是没有问题了&#xff0c;由于新增了qr-code以及quill富文本组件&#xff0c;导致打包时报错。 原因&#xff1a;vitepress官…...

redis分布式锁-----基于Redis的SETNX命令的简单分布式锁实现

Redis的SETNX命令的简单分布式锁实现的Java示例 首先&#xff0c;确保你已经引入了Jedis这个Java Redis客户端库。你可以通过Maven或Gradle来添加依赖。 1、Maven依赖 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifact…...

HTTP请求头中的Host表示是什么?

表示处理请求的服务器地址&#xff0c;由于一台服务器可能部署多个网站&#xff0c;如果通过域名访问&#xff0c;host就是域名...

apk被play protect blocked的解决方案(ADB+Appium+webdriverio)

起因:公司有海外项目&#xff0c;需要推广apk &#xff0c;数量多&#xff0c;但是由于被play protect阻止安装&#xff0c;初版解决方案 apk加固、换签名、垃圾代码、修改资源文件的MD5&#xff0c;但是由于原生代码标记过于严重&#xff0c;推广成本高&#xff0c;又换了一种…...

【BlossomRPC】手把手教你写一个RPC协议

文章目录 新的开始什么是RPC?设计一个RPC需要些什么&#xff1f; 新的开始 经常会遇到一些项目&#xff0c;看着看着就发现看不懂文档了&#xff0c;也就是会出现一些跳过讲解的文章&#xff0c;使得自己很难了解某种中间件的开发全貌&#xff0c;所以想着自己先设计一个比较…...

算法之美:堆排序原理剖析及应用案例分解实现

这段时间持续更新关于“二叉树”的专栏文章&#xff0c;关心的小伙伴们对于二叉树的基本原理已经有了初步的了解。接下来&#xff0c;我将会更深入地探究二叉树的原理&#xff0c;并且展示如何将这些原理应用到更广泛的场景中去。文章将延续前面文章的风格&#xff0c;尽量精炼…...

Net8 ABP VNext完美集成FreeSql、SqlSugar,实现聚合根增删改查,完全去掉EFCore

没有基础的&#xff0c;请参考上一篇 彩蛋到最后一张图里找 参考链接 结果直接上图&#xff0c;没有任何业务代码 启动后&#xff0c;已经有了基本的CRUD功能&#xff0c;还扩展了批量删除&#xff0c;与动态查询 动态查询截图&#xff0c;支持分页&#xff0c;排序 实现原理…...

yolov8直接调用zed相机实现三维测距(python)

yolov8直接调用zed相机实现三维测距&#xff08;python&#xff09; 1. 相关配置2. 版本一2.1 相关代码2.2 实验结果 3. 版本二3.1 相关代码3.2 实验结果 相关链接 此项目直接调用zed相机实现三维测距&#xff0c;无需标定&#xff0c;相关内容如下&#xff1a; 1.yolov5直接调…...

element跑马灯/轮播图,第一页隐藏左边按钮,最后一页隐藏右边按钮(vue 开箱即用)

图示&#xff1a; 第一步&#xff1a; <el-carousel :class"changeIndex0?leftBtnNone:changeIndeximgDataList.length-1? rightBtnNone:" height"546px" :autoplay"false" change"changeNext"><el-carousel-item v-for…...

下载及安装PHP,composer,phpstudy,thinkPHP6.0框架

文章目录 目录 文章目录 前言 一、下载PHP 二、下载composer 三、下载PHPstudy 四、下载think PHP 1.下载 2.多应用开发 前言 thinkPHP是一款开源的PHP框架&#xff0c;它是基于MVC&#xff08;Model-View-Controller&#xff09;设计模式构建的。thinkPHP提供了丰富的…...

volatile使用场景总结

volatile关键字在Java中用于确保变量的可见性以及防止指令重排序&#xff0c;特别是在没有使用锁定机制时对变量进行读写的多线程环境中。以下是需要使用volatile修饰的一些场景&#xff1a; 确保变量的可见性 当一个变量被多个线程访问&#xff0c;且至少有一个线程在写&…...

AcWing 1413. 矩形牛棚(每日一题)

原题链接&#xff1a;1413. 矩形牛棚 - AcWing题库 作为一个资本家&#xff0c;农夫约翰希望通过购买更多的奶牛来扩大他的牛奶业务。 因此&#xff0c;他需要找地方建立一个新的牛棚。 约翰购买了一大块土地&#xff0c;这个土地可以看作是一个 R 行&#xff08;编号 1∼R&…...

macOS Sonoma 14.4.1 (23E224) 正式版发布,ISO、IPSW、PKG 下载

macOS Sonoma 14.4.1 (23E224) 正式版发布&#xff0c;ISO、IPSW、PKG 下载 2024 年 3 月 26 日凌晨&#xff0c;macOS Sonoma 14.4.1 更新修复了一个可能导致连接到外部显示器的 USB 集线器无法被识别的问题。它还解决了可能导致 Java 应用程序意外退出的问题&#xff0c;并修…...

WPF使用外部字体,思源黑体,为例子

1.在工程中新建文件夹&#xff0c;命名为“Font"。 2.将下载好的字体文件复制到Font文件夹。 3.在工程中&#xff0c;加入静态资源 <Window.Resources><FontFamily x:Key"SYBold">/AnalyzeImage;Component/Font/#思源黑体 CN Bold</FontFamily…...

9、jenkins微服务持续集成(一)

文章目录 一、流程说明二、源码概述三、本地部署3.1 SpringCloud微服务部署本地运行微服务本地部署微服务3.2 静态Web前端部署四、Docker快速入门一、流程说明 Jenkins+Docker+SpringCloud持续集成流程说明 大致流程说明: 开发人员每天把代码提交到Gitlab代码仓库Jenkins从G…...

VOC(客户之声)赋能智能家居:打造个性化、交互式的未来生活体验

随着科技的飞速发展&#xff0c;智能家居已成为现代家庭不可或缺的一部分。然而&#xff0c;如何让智能家居更好地满足用户需求&#xff0c;提供更贴心、更智能的服务&#xff0c;一直是行业关注的焦点。在这个背景下&#xff0c;VOC&#xff08;客户之声&#xff09;作为一种用…...

时序预测 | Matlab实现GWO-BP灰狼算法优化BP神经网络时间序列预测

时序预测 | Matlab实现GWO-BP灰狼算法优化BP神经网络时间序列预测 目录 时序预测 | Matlab实现GWO-BP灰狼算法优化BP神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现GWO-BP灰狼算法优化BP神经网络时间序列预测&#xff08;完整源码和数据…...

node.js学习(2)

版权声明 以下文章为尚硅谷PDF资料&#xff0c;B站视频链接&#xff1a;【尚硅谷Node.js零基础视频教程&#xff0c;nodejs新手到高手】仅供个人学习交流使用。如涉及侵权问题&#xff0c;请立即与本人联系&#xff0c;本人将积极配合删除相关内容。感谢理解和支持&#xff0c;…...

【pytest】测试数据存储在 Excel 或 TXT 文件中,如何参数化

如果测试数据存储在 Excel 或 TXT 文件中&#xff0c;你可以使用外部库来读取这些数据&#xff0c;并将其转化为参数化测试所需的格式。下面我将分别展示如何从这两种文件中读取数据&#xff0c;并用于参数化测试。 从 Excel 文件中读取测试数据 你可以使用 pandas 库来读取 …...

ubuntu22.04@Jetson Orin Nano安装配置VNC服务端

ubuntu22.04Jetson Orin Nano安装&配置VNC服务端 1. 源由2. 环境3. VNC安装Step 1: update and install xserver-xorg-video-dummyStep 2: Create config for dummy virtual displayStep3: Add the following contents in xorg.conf.dummyStep 4: Update /etc/X11/xorg.con…...

Rk3566 yolov5部署(一)Ubuntu系统镜像烧录与串口调试实战

1. 准备工作&#xff1a;硬件与软件清单 在开始RK3566开发板的Ubuntu系统镜像烧录之前&#xff0c;我们需要准备好必要的硬件和软件工具。我刚开始接触这块开发板时&#xff0c;就因为漏掉了几个小配件耽误了一整天时间&#xff0c;所以特别提醒大家要仔细检查以下清单。 硬件部…...

霞鹜文楷GB:为什么选择这款免费开源的中文国标字体?

霞鹜文楷GB&#xff1a;为什么选择这款免费开源的中文国标字体&#xff1f; 【免费下载链接】LxgwWenkaiGB An open-source Simplified Chinese font derived from Klee One. 项目地址: https://gitcode.com/gh_mirrors/lx/LxgwWenkaiGB 霞鹜文楷GB是一款基于日本Klee O…...

【无线通信】基于统计信道的低复杂度旋转和位置优化为6D可移动天线无线通信附Matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。&#x1f34e; 往期回顾关注个人主页&#xff1a;Matlab科研工作室&#x1f447; 关注我领取海量matlab电子书和…...

MultiHighlight插件完全指南:5步提升代码阅读效率300%

MultiHighlight插件完全指南&#xff1a;5步提升代码阅读效率300% 【免费下载链接】MultiHighlight Jetbrains IDE plugin: highlight identifiers with custom colors &#x1f3a8;&#x1f4a1; 项目地址: https://gitcode.com/gh_mirrors/mu/MultiHighlight 在当今快…...

vLLM生产-解码分离架构:从概念到部署的吞吐优化实践

1. 为什么需要生产-解码分离架构 第一次部署大模型在线服务时&#xff0c;我盯着监控面板上的GPU利用率曲线直挠头——为什么计算单元总是间歇性满载又突然空闲&#xff1f;后来发现这是典型的Prefill-Decode耦合架构的弊端。就像餐厅里同一个厨师既要负责备菜&#xff08;切配…...

腾讯游戏卡顿终极解决方案:ACE-Guard资源限制器完整指南

腾讯游戏卡顿终极解决方案&#xff1a;ACE-Guard资源限制器完整指南 【免费下载链接】sguard_limit 限制ACE-Guard Client EXE占用系统资源&#xff0c;支持各种腾讯游戏 项目地址: https://gitcode.com/gh_mirrors/sg/sguard_limit 你是否在玩《地下城与勇士》、《英雄…...

制造业数据库选型实战:为什么我们从 MySQL 迁移到 TiDB

写在前面 作为一个制造业数字化团队的开发负责人&#xff0c;我最怕听到的一句话就是&#xff1a;“数据库又慢了”。 MOM 平台上线 4 年&#xff0c;数据量从最初的几百 G 涨到几个 T。每次月底报表、跨工厂查询&#xff0c;系统就开始”喘气”。加索引、拆表、优化 SQL………...

PHP 的异步编程 该怎么选择

一切的起点&#xff1a;synchronized 的舒适区 刚开始写代码时&#xff0c;思维往往停留在"单机"模式。遇到需要控制并发的地方&#xff0c;直觉反应就是加个 synchronized 关键字。 1. 曾经写过的代码 // 简单的库存扣减 public synchronized void deductStock(Stri…...

亚马逊爆款选品:数据采集与三方服务商对接

一、核心选品数据采集渠道1. 官方免费数据源&#xff08;合规权威&#xff09;BSR畅销榜&#xff1a;查看类目热销品&#xff0c;定位头部爆款。新品榜&#xff1a;挖掘增速快、潜力大的新品。商机探测器&#xff1a;卖家后台直达&#xff0c;获取高搜索量、低竞争蓝海词。品牌…...

计算机毕业设计:汽车数据可视化与后台管理平台 Django框架 requests爬虫 可视化 车辆 数据分析 大数据 机器学习(建议收藏)✅

博主介绍&#xff1a;✌全网粉丝10W&#xff0c;前互联网大厂软件研发、集结硕博英豪成立软件开发工作室&#xff0c;专注于计算机相关专业项目实战6年之久&#xff0c;累计开发项目作品上万套。凭借丰富的经验与专业实力&#xff0c;已帮助成千上万的学生顺利毕业&#xff0c;…...