背景

最近学习了vuepress，聊一下我遇到的一些问题，研究还不够深入，还需要继续进行

引入element-ui后报错

这个问题是说image.png
大部分文档都是让我升级core-js，但是没有用，后来发现是element ui依赖core-js的2.x版本，而web项目依赖core-js的3.x版本导致的，最后是通过安装npm install async-validator@1.11.5来解决的，下载后重新运行，问题解决

window is not defined

本地运行的时候没有问题，但是在打包的时候报错，最初百度就有答案，但是一直没读懂，后来明白了
我们组件库中有一个文件上传组件file-upload有一个剪裁功能，剪裁功能依赖了一个第三方库：vuecropper，这个vuecropper使用了window对象，在dev环境下，我们运行在浏览器中，是没问题的，但是当我们在打包的时候，vuepress会为我们的md文件生成对应的html，这个过程是在node中环境中进行的，node.js是没有window对象，所以就报错了
解决：
不要在enhanceApp.js中进行全局引入，而是在单独使用的demo中进行引入，做到在mounted或者beforeMouned中动态引入，如下代码：

  2. <template>
  3.     <demo-block>
  4.         <xl-file-upload class="btn-box"
  5.             ref="imageUpload"
  6.             :ossData="ossData"
  7.             @getFileURL="uploadFile">上传图片</xl-file-upload>
  8.     </demo-block>
  9. </template>
  11. <script>
  12. import XlFileUpload from '../../../../packages/xl-file-upload/index.js';
  13. export default {
  14.     data() {
  15.         return {
  16.             ossData: {},
  17.         }
  18.     },
  19.     methods: {
  20.         // ...
  21.     },
  22.     components: { XlFileUpload}
  23. }
  24. </script>

通过观察打包过程就可以看出来，分别在打包client和server的构建
image.png

webpack配置svg展示

我们的组件中使用了svg-sprite技术，如果要展示demo，则需要进行webpack配置，刚开始我只是下载了相关的loader，而没有进行配置，想着引入的是已经封装好的组件，结果svg一直无法展示
首先，我在config.js里面配置了webpack（直接从组件库的开发webpack配置中复制过来），以为直接就好了

  1. // config.js
  2. chainWebpack: config => {
  3.             const svgRule = config.module.rule("svg");
  4.             svgRule.uses.clear();
  5.             svgRule
  6.               .use("svg-sprite-loader")
  7.               .loader("svg-sprite-loader")
  8.               .options({
  9.                 symbolId: "icon-[name]",
  10.                 include: ["examples/assets/fonts"]
  11.               });
  12.     }

结果发现svg仍旧不展示
然后我想起来vuepress是一个单独的项目，所以应该是需要引入自己的静态资源，所以我新建了一个.vuepress/public文件夹，在里面配置了和组件开发环境目录的svg文件，再次运行，可以了！
image.png
开心的打包文件，发现又报错了。。。
image.png
看这个样子像是说，打包的时候有些文件没法解析，感觉是因为我配置webpack时候，把相关svg的配置删除了，导致原本vuepress里面的svg无法打包了，因此换了一种webpack对于svg的配置

  1. chainWebpack: config => {
  2.     config.module
  3.       .rule('svg')
  4.       .exclude.add(resolve('public/fonts'))
  5.       .end()
  7.     config.module
  8.       .rule('icons')
  9.       .test(/\.svg$/)
  10.       .include.add(resolve('public/fonts'))
  11.       .end()
  12.       .use('svg-sprite-loader')
  13.       .loader('svg-sprite-loader')
  14.       .options({
  15.         symbolId: 'icon-[name]'
  16.       })
  17.   }

意思是如果是解析我们配置的public/fonts下的svg，不用默认的svg解析方式，而是用icons配置的解析方式，再次打包，成功了。。。