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报错
问题:build时报错:document/window is not defined。 背景:使用vitepress展示自定义的组件,之前build是没有问题了,由于新增了qr-code以及quill富文本组件,导致打包时报错。 原因:vitepress官…...
redis分布式锁-----基于Redis的SETNX命令的简单分布式锁实现
Redis的SETNX命令的简单分布式锁实现的Java示例 首先,确保你已经引入了Jedis这个Java Redis客户端库。你可以通过Maven或Gradle来添加依赖。 1、Maven依赖 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifact…...
HTTP请求头中的Host表示是什么?
表示处理请求的服务器地址,由于一台服务器可能部署多个网站,如果通过域名访问,host就是域名...
apk被play protect blocked的解决方案(ADB+Appium+webdriverio)
起因:公司有海外项目,需要推广apk ,数量多,但是由于被play protect阻止安装,初版解决方案 apk加固、换签名、垃圾代码、修改资源文件的MD5,但是由于原生代码标记过于严重,推广成本高,又换了一种…...
【BlossomRPC】手把手教你写一个RPC协议
文章目录 新的开始什么是RPC?设计一个RPC需要些什么? 新的开始 经常会遇到一些项目,看着看着就发现看不懂文档了,也就是会出现一些跳过讲解的文章,使得自己很难了解某种中间件的开发全貌,所以想着自己先设计一个比较…...
算法之美:堆排序原理剖析及应用案例分解实现
这段时间持续更新关于“二叉树”的专栏文章,关心的小伙伴们对于二叉树的基本原理已经有了初步的了解。接下来,我将会更深入地探究二叉树的原理,并且展示如何将这些原理应用到更广泛的场景中去。文章将延续前面文章的风格,尽量精炼…...
Net8 ABP VNext完美集成FreeSql、SqlSugar,实现聚合根增删改查,完全去掉EFCore
没有基础的,请参考上一篇 彩蛋到最后一张图里找 参考链接 结果直接上图,没有任何业务代码 启动后,已经有了基本的CRUD功能,还扩展了批量删除,与动态查询 动态查询截图,支持分页,排序 实现原理…...
yolov8直接调用zed相机实现三维测距(python)
yolov8直接调用zed相机实现三维测距(python) 1. 相关配置2. 版本一2.1 相关代码2.2 实验结果 3. 版本二3.1 相关代码3.2 实验结果 相关链接 此项目直接调用zed相机实现三维测距,无需标定,相关内容如下: 1.yolov5直接调…...
element跑马灯/轮播图,第一页隐藏左边按钮,最后一页隐藏右边按钮(vue 开箱即用)
图示: 第一步: <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框架,它是基于MVC(Model-View-Controller)设计模式构建的。thinkPHP提供了丰富的…...
volatile使用场景总结
volatile关键字在Java中用于确保变量的可见性以及防止指令重排序,特别是在没有使用锁定机制时对变量进行读写的多线程环境中。以下是需要使用volatile修饰的一些场景: 确保变量的可见性 当一个变量被多个线程访问,且至少有一个线程在写&…...
AcWing 1413. 矩形牛棚(每日一题)
原题链接:1413. 矩形牛棚 - AcWing题库 作为一个资本家,农夫约翰希望通过购买更多的奶牛来扩大他的牛奶业务。 因此,他需要找地方建立一个新的牛棚。 约翰购买了一大块土地,这个土地可以看作是一个 R 行(编号 1∼R&…...
macOS Sonoma 14.4.1 (23E224) 正式版发布,ISO、IPSW、PKG 下载
macOS Sonoma 14.4.1 (23E224) 正式版发布,ISO、IPSW、PKG 下载 2024 年 3 月 26 日凌晨,macOS Sonoma 14.4.1 更新修复了一个可能导致连接到外部显示器的 USB 集线器无法被识别的问题。它还解决了可能导致 Java 应用程序意外退出的问题,并修…...
WPF使用外部字体,思源黑体,为例子
1.在工程中新建文件夹,命名为“Font"。 2.将下载好的字体文件复制到Font文件夹。 3.在工程中,加入静态资源 <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(客户之声)赋能智能家居:打造个性化、交互式的未来生活体验
随着科技的飞速发展,智能家居已成为现代家庭不可或缺的一部分。然而,如何让智能家居更好地满足用户需求,提供更贴心、更智能的服务,一直是行业关注的焦点。在这个背景下,VOC(客户之声)作为一种用…...
时序预测 | Matlab实现GWO-BP灰狼算法优化BP神经网络时间序列预测
时序预测 | Matlab实现GWO-BP灰狼算法优化BP神经网络时间序列预测 目录 时序预测 | Matlab实现GWO-BP灰狼算法优化BP神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现GWO-BP灰狼算法优化BP神经网络时间序列预测(完整源码和数据…...
node.js学习(2)
版权声明 以下文章为尚硅谷PDF资料,B站视频链接:【尚硅谷Node.js零基础视频教程,nodejs新手到高手】仅供个人学习交流使用。如涉及侵权问题,请立即与本人联系,本人将积极配合删除相关内容。感谢理解和支持,…...
【pytest】测试数据存储在 Excel 或 TXT 文件中,如何参数化
如果测试数据存储在 Excel 或 TXT 文件中,你可以使用外部库来读取这些数据,并将其转化为参数化测试所需的格式。下面我将分别展示如何从这两种文件中读取数据,并用于参数化测试。 从 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…...
开源物联网平台SiteWhere:微服务架构下的设备管理与数据流实战
1. 项目概述:一个开源的物联网应用平台如果你正在寻找一个能帮你快速搭建、管理和扩展物联网应用的核心平台,而不是从零开始造轮子,那么SiteWhere这个开源项目绝对值得你花时间深入了解。它不是一个简单的设备连接网关,而是一个功…...
WeChatMsg:如何用开源工具构建你的个人数字记忆库
WeChatMsg:如何用开源工具构建你的个人数字记忆库 【免费下载链接】WeChatMsg 提取微信聊天记录,将其导出成HTML、Word、CSV文档永久保存,对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeChatMsg…...
告别环境报错!保姆级教程:从JRE到STM32CubeMX 6.10.0的完整安装与配置
从零搭建STM32开发环境:CubeMX 6.10.0避坑全指南 刚拿到STM32开发板时的兴奋,往往在环境配置阶段就被各种报错消磨殆尽。作为过来人,我深刻理解那种看着红色错误提示却无从下手的挫败感。本文将带你用最稳妥的方式完成从Java环境到CubeMX的全…...
开源创意资产管理平台Buddy:设计团队协作与版本控制实践
1. 项目概述:一个为创意协作而生的开源平台如果你在团队里负责过创意项目,无论是UI设计、视频剪辑还是产品原型开发,大概率都经历过这样的混乱:设计稿的版本号从V1.0一路飙升到V12_final_really_final.psd;开发同学在群…...
告别CubeMX代码洁癖:教你如何把main()函数挪到自己的.c文件里(STM32F4实战)
重构STM32工程的艺术:将main()迁移到自定义文件的实战指南 每次打开CubeMX生成的工程,看到那个被各种初始化代码塞满的main.c文件,你是否也感到一丝不适?作为一名有追求的嵌入式开发者,我们渴望对项目结构拥有绝对掌控…...
如何在Windows电脑上轻松安装安卓应用:5步完成轻量级跨平台部署
如何在Windows电脑上轻松安装安卓应用:5步完成轻量级跨平台部署 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否想在Windows电脑上运行安卓应用&…...
科技与科学领域每日新闻摘要-2026-05-12
科技与科学领域每日新闻摘要 日期: 2026年5月12日 1. Nature发布2026年最值得关注的七大技术 核心要点: 《自然》杂志发表2026年最值得关注的七项关键技术,包括异种器官移植、AI天气预报、可控核聚变、光学显微脑图谱、mRNA疗法、高精度天文成像和量子计算。这些技…...
使用 LikeShop 搭建商城的完整流程(从0到上线)
先说结论用 LikeShop 搭建商城,本质可以拆成 5 步:👉 部署系统 → 配置基础 → 上架商品 → 打通交易 → 引流运营只要这 5 步跑通,就可以实现“可正常卖货”的商城。一、准备阶段(很多人会忽略)在动手之前…...
别再照搬Zynq教程了!手把手教你为Arty A7-35T配置MicroBlaze的SPI Flash启动(附时钟连接避坑指南)
别再照搬Zynq教程了!手把手教你为Arty A7-35T配置MicroBlaze的SPI Flash启动(附时钟连接避坑指南) 在FPGA开发领域,Zynq系列因其ARMFPGA的异构架构而广受欢迎,网上教程资源也最为丰富。但这也导致了一个常见陷阱——许…...
C语言编写轻量爬虫工具
当我们要使用C语言编写一个定制化轻量爬虫工具,得需要结合网络请求、HTML解析和数据处理等步骤。由于是轻量级,正常情况下我们将使用C语言标准库以及一些第三方库来简化开发。这样省时省力,生态丰富可以帮助大家少走很多弯路。具体细节可以看…...
