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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22