解决VitePress构建文档与iconfont样式冲突问题

474 阅读1分钟

背景

最近写了一个组件库,使用vitepress构建组件库的文档,在引入iconfont的时候发现vitepress打包出了问题

我们使用iconfont提供的svg,需要导入iconfont.js,可是在导入后打包会报错:ReferenceError: window is not defined image.png

问题复现

image.png

解决方法

介于vitepress目前还远未被广泛使用,网上关于vitepress报错的信息也比较少。于是去官方仓库的Issues中看看,终于找到了这个报错。 这是因为vitepress build生成的静态文件都是通过node服务端渲染完成的。因此,当组件中不是在beforeMount 或者 mounted 钩子中访问浏览器 / DOM 的 API时,就会有问题。

image.png

解决方法是不在index.ts里直接导入

image.png

在md文档中使用vue语法,在mounted钩子中引入

image.png

亲测可行!

另外的问题

其实在解决这个问题时,打包时还遇到了另外一个问题,打包报错Missing "./preload-helper" export in "vite" package 复现比较困难,我直接贴一个解决方案:

第一个报错js,右键点进去,搜索 vite/preload-helper 替换为 \0vite/preload-helper 

目前在vitepress的Issues中也发现有人提了这个问题,解决方法也都是这个,但是手动更改node_modules的方案确实不太适合,我估计可能是vite版本的问题?

留给时间去解决吧~~