vitepress 打包遇到windows为undefiend的问题

最新推荐文章于 2024-08-18 16:14:02 发布

喵大叔、

最新推荐文章于 2024-08-18 16:14:02 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 vitepress

本文链接：https://blog.csdn.net/weixin_43990297/article/details/129669746

市面上针对vitepress的文章比较少,官方文档也不是很全,需要自行去源码里面找配置
当文档项目打包时因为引入的第三方组件库内部会用到windows,但vitepress打包的时候,会在node中执行(为了服务端渲染的场景),node中没有window
找了下文档,有两种解决思路, 特此记录


第一种方案: 使用ClientOnly组件(仅在客户端渲染其插槽组件使用)  但是不建议
<ClientOnly>
  <NonSSRFriendlyComponent />
</ClientOnly>

第二种方案: 使用vue混入,在mounted中动态导入,
// \docs\.vitepress\theme\index.js
export default {
  ...DefaultTheme,
  NotFound: () => "custom 404", // <- this is a Vue 3 functional component
  enhanceApp: async (ctx) => {
    let { app } = ctx;
    DefaultTheme.enhanceApp(ctx);
    app.mixin({
      async mounted() {
        //你自己的插件地址
        import('../../src/index.js').then(module => {
            Vue.use(module.default);
        })
      },
    });
  },
};