VuePress的踩坑之路(一)

时间:2021-1-8 作者:admin

1、问题

使用自己写的一个UI库,然后利用VuePress编写官网文档,由于是第一次使用该框架,所以遇到一些问题,在这里记录下自己所踩过的坑。
使用npm run docs:dev编写完文档后,需要运行npm run docs:build将其build打包,然后发布到服务器上。然而在build的过程中,报了如下的错误:

Reason: ReferenceError: window is not defined
error Error rendering /components/button-test.html: false
undefined
Error: render function or template not defined in component: button-demo1
    at normalizeRender (E:\CodeNote\Vue.js\code\yued\node_modules\vue-server-renderer\build.dev.js:8262:13)
    at renderComponentInner (E:\CodeNote\Vue.js\code\yued\node_modules\vue-server-renderer\build.dev.js:8412:3)
    at renderComponent (E:\CodeNote\Vue.js\code\yued\node_modules\vue-server-renderer\build.dev.js:8383:5)
    at resolve (E:\CodeNote\Vue.js\code\yued\node_modules\vue-server-renderer\build.dev.js:8451:9)

意思就是vuepress在引入外部组件build报错window is not defined

2、原因分析

上网google了一圈,大概是由于浏览器的API访问限制导致,因为在build的过程中,所有的页面在生成静态HTML时都需要通过Node.js服务端渲染,而Node.js中没有window对象,这时候访问浏览器/DOM中的API自然会报错。
因此需要确保在beforeMount或者mounted访问浏览器/DOM的API。

3、解决方法

1、利用vuepress官网给出的方法<ClientOnly>

可以将组件包裹在内置的组件<ClientOnly>中:

<ClientOnly>
  <NonSSRFriendlyComponent/>
</ClientOnly>

请注意,这并不能解决一些组件或库在导入时就试图访问浏览器 API 的问题 —— 如果需要使用这样的组件或库,你需要在合适的生命周期钩子中动态导入它们。

2、动态组件(动态导入)
<template>
  <component v-if="dynamicComponent" :is="dynamicComponent"></component>
</template>
<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted () {
    import('./lib-that-access-window-on-import').then(module => {
      this.dynamicComponent = module.default
    })
  }
}
</script>

这种方式也能解决问题,但是当组件文档多的时候,每次都要在mounted处理,就会很麻烦。而且可以在enhanceApp.js中一次性导入,不需要按需引入。

3、利用Mixin

组件库的引入可以放在enhanceApp.js里面,在这里使用Mixin来处理。

export default ({ Vue, options, router, siteData }) => {
   Vue.use(Element);
   Vue.mixin({
       mounted() {
           import('yued-test').then(function (m) {
               Vue.component('y-button', m.YButton)
           })
       },
   })
};

目前只想到这三种解决方法,应该还存在其他更好的解决方法。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。