前言最近在搭建一个vue组件库（有很多故事要讲。。。），建完轮子需要写组件文档，就选择了vuepress，需要代码文档中的演示，自然要引入组件库。引入组件库后，正常使用写文档没有问题，但是构建的时候就麻烦了...问题1ReferenceError:documentisnotdefined出现这个问题的原因是我在写vue创建组件的时候，style文件引入到.vue文件中，看起来是这样的：熟悉了，样式引入正常，但是问题是组件库代码编译后，会使用document.querySelectory()进行样式处理，vuepress的所有页面都需要Node.js服务端渲染生成静态HTML时。自然地，在Node.js环境中没有文档对象。这时候在浏览器/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)},})};copy代码构建本地运行，组件加载失败，头大，应该使用ES模块：```importElementfrom'element-ui'exportdefault({Vue,options,router,siteData})=>{Vue.use(元素);vue.mixin({mounted(){import('wisdom-ui').then(function(m){Vue.use(m.default)})},})};复制代码```*没有本地运行问题*构建正常问题已解决。这里为什么不能使用require加载组件库，可以看这里原文
