@import'../style/content.less';在VuePress构建打包的时候并没有定义window文档，如果需要在中进行代码演示，自然需要引入组件库。引入组件库后，正常使用写文档没问题，但是构建的时候就麻烦了...问题1ReferenceError:documentisnotdefined出现这个问题的原因是我在写vue组件的时候，我在.vue文件中引入了一个样式文件，它看起来像这样：@import'../style/content.less';大家应该不陌生，正常引入样式，但是问题是组件库代码编译后，会使用document.querySelectory()进行样式处理，vuepress的所有页面都需要在生成静态HTML时要通过Node.js服务器进行渲染，Node.js环境中自然没有document对象。这时候在浏览器/DOM中访问API自然会报错。本地开发没有问题，但是构建的时候会报错。问题2windowisnotdefined出现这个问题也是因为写组件的时候用到了window对象，而Node.js中没有window对象。vuepress第一轮官方给出的解决方案是使用vue的动态组件，详细查看浏览器的API访问限制。这种方法可以解决问题，但是很麻烦。想着要写十几个组件文档，每次写demo都要这样。如果遇到复杂的例子，一个demo中用到好几个组件，岂不是很麻烦，不够优雅，不够优雅。并且在写文档的时候，组件库可以一次性全部导入enhanceApp.js中，不需要按需导入，例如：importElementfrom'element-ui'exportdefault({Vue,options,路由器，站点数据})=>{Vue.use(Element);};第二轮，上面第一个方案已经给我们提供了在Mount或者mounted之前访问浏览器/DOMAPI的思路。但是根据我们的需要，我们已经不能再去mountedindemo组件去单独处理这个问题了。然后我们返回enhanceApp.js。组件库的引入可以放在这里，这里使用mixin来处理。因为是Node.js服务端渲染，首先想到的是使用require:importElementfrom'element-ui'exportdefault({Vue,options,router,siteData})=>{Vue.use(Element);Vue.mixin({mounted(){varWisdomUI=require('wisdom-ui')Vue.use(WisdomUI)},})};build在本地运行，组件加载失败，应该使用ES模块：importElementfrom'element-ui'exportdefault({Vue,options,router,siteData})=>{Vue.use(Element);Vue.mixin({mounted(){import('wisdom-ui').then(function(m){Vue.use(m.default)})},})};在本地运行没有问题。构建正常问题已解决。
