原工程,运行正常
将刚刚的工程复制一份呢,重新 npm install 再 npm run serve 就报错
出现这个问题十之八九都是依赖的问题。有可能是因为这个工程里面之前安装过一些东西,后来莫名其妙的就把 package.json 里面相关的依赖给删掉了。但由于原来的 node_modules 里面的依赖没有被删掉,所以原工程运行是正常的。复制一份出来后,我们重新对 package.json 里面的依赖列表进行 npm install 恢复,他就恢复不了之前已经被删掉的东西了,当依赖没有被完全恢复,我们再 npm run serve 就会报错。
这时我们可以借助一个工具,工具名称为 depcheck (依赖检查工具)
首先要用 npm i 全局安装一下这个工具,命令如下:
npm i -g depcheck
然后再到工程目录下运行 depcheck 依赖检查命令(dep[dependency(依赖)] check[检查])
depcheck
Unused dependencies:未使用的依赖项
Unused devDependencies:未使用的开发依赖(官方文档说这里检查的不怎么准确)
Missing dependencies:缺少依赖项
检查完毕后会告诉你目前的依赖信息,有一些情况是需要你处理的。他告诉你目前这个工程中缺失了红框圈出的这些依赖(Missing dependencies[缺少依赖项]),而且还会告诉你这些依赖是在哪些文件中用到了的。
这个时候只需要把这些缺失的依赖重新安装好就可以成功运行了。
我们再进行依赖检查时,他还会告诉你除了缺失的依赖外,还有一些情况也最好处理一下,比如这里红框圈出来的这些依赖(Unused dependencies[未使用的依赖项]),表示说在 package.json 里面写了这个依赖,但在代码里面没有用到,最好把这些没有到的依赖删掉。
这个时候我们把这些没有用到的依赖删掉,再来 depcheck 检查一下,这些没有用到的依赖就不会出现了。
但还有一个问题,就是在 Unused devDependencies[未使用的开发依赖] 里面,这里面也有一些没有使用到的依赖,不过按照官方文档的说法这里检查的时候不怎么准确,像我们这个工程都是在 vue cli 里面搭建的,而 vue cli 里面肯定是要用到 @vue/cli-plugin-babel 这些的。
解决办法:在项目工程里面建立一个文件,文件名叫 .depcheckrc
.depcheckrc
在这个文件里面,要告诉 depcheck 应该忽略掉哪些依赖,不要去检查他,如果检查的话可能检查出来的是有问题的。
使用方法:使用 ignores: ["", "", ""] 把要去除掉检查的依赖依次写进去即可
ignores: ["@babel/eslint-parser", "@vue/cli-plugin-babel", "@vue/cli-plugin-eslint"]
再来 depcheck 检查一下,刚刚添加到 ignores 里面的这些依赖就不会出现在 Unused devDependencies[未使用的开发依赖] 里面了。