组件库系列五：vuepress遇到的坑

Palate

已于 2022-04-10 14:21:38 修改

阅读量1.7k

点赞数 2

分类专栏： Vue 组件库文章标签： vue

于 2022-04-10 13:21:25 首次发布

本文链接：https://blog.csdn.net/weixin_51670675/article/details/124076700

版权

Vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

组件库

5 篇文章 4 订阅

订阅专栏

前面四篇文章已经基本完成了一个组件库，直接发布文档就可以了。但是没想到遇到这么多问题（坑）。

过程可以查看部署 | VuePress (vuejs.org)，但是坑还是踩过才知道。

先总结一下前面组件库文档搭建过程的文档，之前文章中有提到过，这里一起总结一下。

搭建过程

安装sass-loader和node-sass报错

报错原因是sass-loader版本过高。

查阅资料后，按下面命令下载
```
yarn add sass-loader node-sass webpack --save-dev
```
但还是没有解决问题，反而引入了webpack（后面的错误应该是这时候引入的）

然后尝试降低sass-loader版本，

还是报错，因为与node-sass版本不匹配

然后就去找node-sass和sass-loader的版本配合
```
yarn add sass-loader@10.1.1 -D
yarn add node-sass@5.0.0 -D
```

core-js报错

// 报错信息
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat ‘C:\hiberfil.sys‘

解决yarn add core-js@2 重新装一下

vuepress不自动更新

本地开发模式运行Vuepress 1.x 时，浏览器不能自动更新

在 package.json 中将运行命令由
```
"dev": "vuepress dev docs"
```
改为
```
"dev": "vuepress dev docs --temp .temp"
```
文件保存后自动更新一下页面，但是不是很快速，有些地方修改了不更新。

部署过程

webpack 重复引入
```
// 报错信息
TypeError: Cannot read property 'tapAsync' of undefined
at C:\Users\USER\Desktop\github\Mui\por-ui-doc\node_modules\vue-server-renderer\server-plugin.js:52:39
```
重复引入webpack，因为vuepress内置了webpack，但是自己又引入webpack（应该是前面错误引入的）

解决：
```
yarn remove webpack
```
这里注意不要删掉node_modules，然后上到package.json文件中该包的信息，再进行 npm install 进行下载。因为这种方式麻烦而且依赖重新下载可能又会出错。（看了网上的有同样的问题，就是这么做的，反正跳进另一个坑）

解决了一个，继续打包，又报错了。。。
window is not defined

问题原因

引入某些库时会出现运行时没任何问题，而打包时报window is not defined或者document is not defined导致打包时失败的话，这是由于vuepress采用的是服务端渲染所以此时找不到对应的window。

这个问题官方有解决方案：在 Markdown 中使用 Vue | VuePress (vuejs.org)

在.md文件中，加入一组标签：
```
<ClientOnly>
  <NonSSRFriendlyComponent/>
</ClientOnly>
```
也可以使用入口文件 enhanceApp.js 中，修改引入方式，这里注意Vue.use()中default必须保留。
```
export default ({ Vue, options, router, siteData }) => {
  Vue.mixin({
    mounted() {
      import ('por-ui').then(function(porUI) {
        Vue.use(porUI.default)
      })
    },
  })
};
```
修改之后还是一样的报错问题（又改了好几遍），原来是toast插件也需要再这里引入
```
Vue.prototype.$toast = (porUI.Plugin)
```
继续打包。。。终于没报错了

那打开项目看看。。。
项目出现黑色方块

本地直接打开html出现黑色方块，需要在项目中安装vuepress-plugin-serve

安装后，或者直接部署文档，文件还是没有样式，就需要设置base

写两个，一个用于Dev，一个用于Build。
```
//base: "/",*
base: "./",
```
这里的base是根据官方文档修改的，这里却出问题了

修改后，重新打包，这次首页正常了

点击进入看看，又出问题了，直接404
页面404

打开项目下的 node_modules@vuepress\core\lib\client 下的 app.js 文件，将mode注释掉就行了，让它默认为hash
```
mode: 'history'
```
修改好了，重新打包，这次终于没有问题了