关于node.js:VuePress在build打包时window-document-is-not-defined

18次阅读

共计 1654 个字符，预计需要花费 5 分钟才能阅读完成。

近期在造一个 vue 的组件库(这也有不少故事能够讲 …)，造完轮子后须要编写组件文档，选了 vuepress，在文档中须要代码演示，天然就须要引入组件库，引入组件库后编写文档失常应用没有问题，然而在 build 的时候就出麻烦了 …

问题一

ReferenceError: document is not defined

呈现这个问题的起因是我在编写 vue 组件的时候，在.vue 文件中引入了款式文件，就是上面这个样子：
```
<style lang="less"> @import '../style/content.less'; </style>
```
这个大家应该很相熟了，失常的引入款式，然而问题是组件库代码编译过后，会用到 document.querySelectory() 来进行款式解决，而 vuepress 所有的页面在生成动态 HTML 时都须要通过 Node.js 服务端渲染, Node.js 环境中天然没有 document 对象，这时候拜访浏览器 /DOM 中的 API 天然会报错。

本地开发没有问题，然而 build 就会出错
问题二
window is not defined

呈现这个问题同样是因为在编写组件时用到了 window 对象，而 Node.js 中没有 window 对象。

第一回合

vuepress 官网给出解决办法，就是利用 vue 的动静组件,
```
<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>
```
具体查看浏览器的 API 拜访限度

这种形式诚然能解决问题，然而很麻烦，想想我要编写十几个组件文档，写 demo 的时候每次都要这样解决，要是遇到简单的示例，一个 demo 外面用到了好几个组件，那岂不是麻烦得很，不够优雅，不够优雅。

而且编写文档的时候，组件库齐全能够在 enhanceApp.js 中一次性残缺引入，不须要按需引入，比方：
```
import Element from 'element-ui'

export default ({Vue, options, router, siteData}) => {Vue.use(Element);
};
```
第二回合

其实下面第一种解决办法曾经给咱们提供了思路，在 beforeMount 或 mounted 再去拜访拜访浏览器 / DOM 的 API。

然而依照咱们的需要，这时候不能再去 demo 组件中的 mounted 独自解决这个问题了，那咱们眼光又回到 enhanceApp.js，组件库的引入能够放到这里，在这里应用 mixin 来解决。

因为是 Node.js 服务端渲染，第一想到了用 require:
```
import Element from 'element-ui'

export default ({Vue, options, router, siteData}) => {Vue.use(Element);
    Vue.mixin({mounted() {var WisdomUI = require('wisdom-ui')
            Vue.use(WisdomUI)
        },
    })
};
```
- build 通过
- 本地运行，组件加载失败

头大，应该用 ES module：

import Element from 'element-ui'

export default ({Vue, options, router, siteData}) => {Vue.use(Element);
   Vue.mixin({mounted() {import('wisdom-ui').then(function (m) {Vue.use(m.default)
           })
       },
   })
};