vue-element-admin 项目 install 踩坑小结

1,456 阅读3分钟

昨天,从 gitLab 上拉了一个项目,项目是用 vue-element-admin 架子搭的。当我执行完 npm install 命令后,报了如下错误:

install报错.png

顺着报错提示,我开始百度了,网上大致就是说国内网速不行,要切换到淘宝镜像源去下载。

于是,就开始执行这段代码npm install --registry=https://registry.npm.taobao.org

然后,把之前的包卸载掉,重新npm install之后,发现还是一样的报错。

难道一定要全局安装 cnpm ?不管如何,还是值得一试,于是乎,我开始执行这段代码npm install -g cnpm -registry=https://registry.npm.taobao.org。然后cnpm install,还是一样的报错。

正常来讲,两者的下载源都是一样的,只是命令不同。第一种是直接把npm的下载源改了(不推荐,因为万一要切回国外镜像,就要来回切),而第二种是另外安装一个全局包。

此时,这个问题已经卡了快半个小时,经过几番尝试无果后,我开始慌了,于是开始向创建这个项目的同事请教,

我:npm install 为啥会报上面图中的错误

他:试下cnpm或者yarn

我:都试了不行

他:node版本多少

我:14.17.6

他:我的12.xxx

。。。

经过一番交流后,发现并不能解决问题。我开始建议他重新开一个文件夹拉一下代码,然后 cnpm install 一下,在他的 node环境 上看下能不能 install 成功,借此排除 node版本 的问题。果然,他也是一样的报错,所以和 node 版本无关。

但是他并没有慌张,貌似之前踩过类似的坑。不出几分钟,他说可以了,并让我按照下面的步骤操作

第一步

把 package.json 里的这两个 editor 包删掉,说是项目中没有用到这两个包,组件也删除了,依赖没删干净

edit.png

第二步

执行这三串命令,把 node_modules 删掉,并强制清掉缓存

npm install rimraf -g
rimraf node_modules
npm cache clean --force

我照着操作了一番,确实可以了。我有理由相信是这两个包捣的鬼,于是去github上找到这个 vue-element-admin 项目,打开package.json,看下这两个包是不是自带的,

template-admin.png

如图,只有一个tui-editor是自带的, vue-quill-editor 是同事后面装上去的(大概率是从别的项目拷的,没有删掉)。

所以排查范围又缩小了,很可能是 vue-quill-editor 这个包的问题,于是又开始了一番操作,

error.png

点进第一个,是这样的

error1.png

大致可以说明,是因为公司网络的问题,导致 cnpm install 装到这个包的时候,由于网络的不稳定导致丢包了。

为了验证这个结论,我又找到了同事,先是一番666,然后问他是怎么定位问题并解决的。他说部门很多同事经常碰到装包失败的问题,因为部门的项目特殊,去年开始网络不稳定了,并不是说自己有多牛,叫我不要崇拜哈哈哈。果然就是网络的问题。

小结

这种装包失败的问题,平时很容易遇到,所以能否快速排查问题就显得尤为重要了。这次要不是同事,我可能搞不定,因为报错提示告诉我的是切换下载源,这只是第一步。最重要的是把这两个包删掉,然后重新 install,我是真的想不到。

所以,下次碰到这种 install 报错,大概率是网络慢丢包导致,那就切换到 cnpm 或者其他国内下载源。如果还不行,那可能就是某个包丢包导致整个安装报错,既然网络问题不能解决,那就只能解决这个包了(这次是这两个包刚好没有用到,有点侥幸了)。