黄骅做网站的电话今日国际新闻摘抄十条

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