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