vitepress builld报错

news2024/11/15 13:51:01

问题: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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1545521.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

邮件接口与第三方平台的集成的方式有哪些?

邮件接口如何实现高效通信&#xff1f;怎么有效地利用邮件接口&#xff1f; 邮件接口与第三方平台的集成已经成为了企业提升工作效率、优化用户体验的关键环节。那么&#xff0c;邮件接口与第三方平台的集成方式究竟有哪些呢&#xff1f;接下来&#xff0c;AokSend就来探讨一下…

力扣由浅至深 每日一题.15 删除排序链表中的重复元素

没关系的&#xff0c;昨天的暴雨不会淋湿今天的自己 —— 24.3.26 删除排序链表中的重复元素 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,1,2] 输出…

VR全景展示:传统制造业如何保持竞争优势?

在结束不久的两会上&#xff0c;数字化经济和创新技术再度成为了热门话题。我国制造产业链完备&#xff0c;但是目前依旧面临着市场需求不足、成本传导压力加大等因素影响&#xff0c;那么传统制造业该如何保持竞争优势呢&#xff1f; 在制造行业中&#xff0c;VR全景展示的应用…

markdown 编辑工具Typora的使用

简介 Typora是一款由Abner Lee开发的轻量级Markdown编辑器&#xff0c;它以其简洁美观的界面、实时预览的功能以及强大的Markdown语法支持而受到用户的喜爱。 Typora的编辑方式与众不同&#xff0c;它采用了所见即所得的编辑方式&#xff0c;这意味着用户在输入Markdown语法标…

OpenCV4.9关于矩阵上的掩码操作

返回&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇:如何使用OpenCV扫描图像、查找表和时间测量 下一篇:OpenCV4.9的是如何进行图像操作 引言&#xff1a; 矩阵上的掩码操作非常简单。这个想法是&#xff0c;我们根据掩码矩阵&#xff08…

简易电路设计,PW1605芯片实现24V/30V/48V限流过压保护功能

一般描述 PW1605 是一款电流限制开关&#xff0c;具有可编程输入过压保护和输出电压箝位功能。集成保护 N 沟道 FET 具有极低的 RDS&#xff08;ON&#xff09; 功能&#xff0c;PW1605有助于降低正常工作期间的功率损耗。可编程软启动时间控制启动期间输出电压的压摆率。独立的…

本周四Techtalk技术交流社区邀请吕海波老师为大家带来精彩技术分享

欢迎您关注我的公众号【尚雷的驿站】 **************************************************************************** 公众号&#xff1a;尚雷的驿站 CSDN &#xff1a;https://blog.csdn.net/shlei5580 墨天轮&#xff1a;https://www.modb.pro/u/2436 PGFans&#xff1a;ht…

Docker - 哲学 默认网络和 自定义网络 与 linux 网络类型 和 overlay2

默认网络&#xff1a;不指定 --nerwork 不指定 网络 run 一个容器时&#xff0c;会直接使用默认的网络桥接器 &#xff08;docker0&#xff09; 自定义网络&#xff1a;指定 --nerwork 让这两台容器互相通信 的前提 - 共享同一个网络 关于 ip addr 显示 ens160 储存驱动 ov…

智慧公厕,运用大数据提升公共厕所管理水平

在现代社会&#xff0c;科技的发展给我们带来了诸多便利&#xff0c;而智慧公厕就是其中之一。智慧公厕运用数据和技术&#xff0c;提升公共厕所的管理水平&#xff0c;为社会生活服务。本文将以智慧公厕源头实力厂家广州中期科技有限公司&#xff0c;遍布全国的众多标杆性案例…

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;并修…

【电力监控保护】AM5SE-IS防孤岛保护装置/35kV、10kV、380V分布式光伏并网供电/什么是孤岛效应/孤岛效应的危害

什么是孤岛效应&#xff01;&#xff01;&#xff01; 安科瑞薛瑶瑶18701709087 在电力系统中&#xff0c;孤岛效应指的是当电网突然断电时&#xff0c;并网光伏发电系统仍然保持对电网中部分线路的供电状态。这种情况下&#xff0c;这些线路与其他电网断开&#xff0c;形成了…

设置远程访问 jupyter Notebook Lab

安装Anaconda / Miniconda 进入conda环境&#xff0c;安装jupyter https://jupyter.org/install 生成notebook config C:\Users\***>jupyter notebook --generate-config Writing default config to: C:\Users\***\.jupyter\jupyter_notebook_config.py创建密码 jupyter…

git cherry pick merge部分提交

cherry pick merge 指定某次提交 1. git history 选择要从哪个分支merge 2. 找到提交记录,选择cherry pick 3.这个时候就可以直接push了

【Leetcode每日一题】 动态规划 - 解码方法(难度⭐)(43)

1. 题目解析 题目链接&#xff1a;91. 解码方法 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 这是一道类似斐波那契数列的题目~ 当我们遇到一个类似斐波那契数列的问题时&#xff0c;我们通常会想到使用动态规划&…

计算机网络(一)体系结构

计算机网络体系结构 1.计算机网络概述1.1 概念1.1.1 计算机网络、互连网、互联网 1.2 组成1.3 功能1.4 分类1.5 性能指标 2.体系结构和参考模型2.1 分层结构&#xff0c;协议、接口、服务2.2 ISO/OSI参考模型和TCP/IP参考模型 1.计算机网络概述 1.1 概念 计算机网络是一个将众…

JavaSE—IO流之字符流与字节流

前言&#xff1a;按照数据的传输方向分为输入流和输出流&#xff1b;流也可以从数据编码格式上划分为字节流和字符流&#xff1b;根据封装类型不同流又分为节点流和处理流。 &#x1f4cc; 字节流 &#x1f4cc; 字节流中常用类及基本方法&#xff1a; 字节输入流 …

水泊梁山108小酒坛之小李广花荣

小李广花荣&#xff0c;是中国著名小说《水浒传》中的108将之一&#xff0c;有“百步穿杨”的功夫。在梁山泊英雄中排行第九&#xff0c;为马军八虎骑兼先锋使之首。原是清风寨副知寨&#xff0c;使一杆银枪&#xff0c;一张弓射遍天下无敌手&#xff0c;生得一双俊目&#xff…

如何使用生成式人工智能进行科学文献检索?

在学术写作过程中&#xff0c;查找文献是一个至关重要的步骤。文献检索不仅可以帮助我们了解研究领域的现状和发展&#xff0c;还可以为我们的论文提供理论支持和数据来源。然而&#xff0c;许多学者在查找文献时往往感到困惑和无所适从。本文将详细解释如何查找文献&#xff0…

java解决跨域问题

浏览器js在访问服务器中的资源时&#xff0c;会出现同一页面或者不同域名(协议&#xff0c;IP&#xff0c;端口)不可访问 例如:file://d://test.html页面(file协议)中通过ajax访问服务器api.test.com的接口(http协议)&#xff0c;由于协议不同&#xff0c;此时会出现浏览器访问…

基于数据沙箱与LLM用例自愈的UI自动化测试平台

本期作者 项目参与人员&#xff1a; 顾伊凡、陈钰广、张又中、杨雨浩、樊执政、熊梦园、何璇、谭楠 UI自动化测试能够在一定程度上确保产品质量&#xff0c;尤其在降本提效的大背景下&#xff0c;其重要性愈发凸显。理想情况下&#xff0c;UI自动化测试不仅能够能帮我们规避不少…