当前位置: 首页 > 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>
http://www.lryc.cn/news/328647.html

相关文章:

  • redis分布式锁-----基于Redis的SETNX命令的简单分布式锁实现
  • HTTP请求头中的Host表示是什么?
  • apk被play protect blocked的解决方案(ADB+Appium+webdriverio)
  • 【BlossomRPC】手把手教你写一个RPC协议
  • 算法之美:堆排序原理剖析及应用案例分解实现
  • Net8 ABP VNext完美集成FreeSql、SqlSugar,实现聚合根增删改查,完全去掉EFCore
  • yolov8直接调用zed相机实现三维测距(python)
  • element跑马灯/轮播图,第一页隐藏左边按钮,最后一页隐藏右边按钮(vue 开箱即用)
  • 下载及安装PHP,composer,phpstudy,thinkPHP6.0框架
  • volatile使用场景总结
  • AcWing 1413. 矩形牛棚(每日一题)
  • macOS Sonoma 14.4.1 (23E224) 正式版发布,ISO、IPSW、PKG 下载
  • WPF使用外部字体,思源黑体,为例子
  • 9、jenkins微服务持续集成(一)
  • VOC(客户之声)赋能智能家居:打造个性化、交互式的未来生活体验
  • 时序预测 | Matlab实现GWO-BP灰狼算法优化BP神经网络时间序列预测
  • node.js学习(2)
  • 【pytest】测试数据存储在 Excel 或 TXT 文件中,如何参数化
  • ubuntu22.04@Jetson Orin Nano安装配置VNC服务端
  • 面向对象特征二:继承
  • 宝塔面板CentOS Stream 8 x86 下如何安装openlitespeed
  • LeetCode 2952.需要添加的硬币的最小数量:贪心(排序)
  • 基于SpringBoot + Vue实现的在线装修管理系统设计与实现+毕业论文
  • 阿里云安全产品简介,Web应用防火墙与云防火墙产品各自作用介绍
  • 作业 二维数组-定位问题
  • 通过Jmeter准备压测数据-mysql示例
  • 如何系统的自学python?
  • 记录一个写自定义Flume拦截器遇到的错误
  • Codeforces Round 934 (Div. 2) D. Non-Palindromic Substring
  • 如何避免公网IP安全风险