关于vue-cli-service:command not found报错引发的实战案例
astonishqft 人气:0最近因为工作需要,开始学习vue,于是在github上找了一个star数比较高的项目 ant-design-vue-pro 准备练手。项目克隆下来后,用 vscode
打开工程,并且使用了 vscode
自带的终端安装了依赖包,但是准备执行 yarn serve
启动工程的时候却意外的抛出了一个错误:
$ vue-cli-service serve /bin/sh: vue-cli-service: command not found error Command failed with exit code 127.
刚开始看到这个报错表示心情还是很平静的,毕竟大风大浪见得多了,首先想到的是不是依赖包没有安装成功?
于是把 node_modules
目录和 yarn.lock
文件删了重新装依赖包,重新启动发现依然报错。思考了下开始怀疑是不是使用 yarn
安装依赖包的问题,于是换了 npm
和 pnpm
进行依赖包的安装,结果依然是启动报错。
嘿嘿,到这里其实就开始觉得这个问题不简单了,怀疑这么严重的问题肯定不是我一个人遇到过,经过一番Google检索,发现确实有人遇到过类似的问题,提出了如下几种解决方法:
- 删除 node_modules 和 lock 文件,重新安装依赖包
- 使用npm安装依赖包,不要使用yarn
- 既然报错 vue-cli-service 这个命令找不到,那就全局安装 npm install -g vue-cli-service
方法一和方法二上面其实已经尝试过了,是不行的,方法三虽然可能可行,但是显然全局安装 vue-cli-service
不是最优解。
于是开始尝试自己思考为什么启动报错?
首先需要弄明白执行 yarn serve
到最终脚手架工程启动都执行了哪些操作?
当我们在工程目录下的终端执行 yarn serve
时,首先会去工程根目录下的 package.json
中的 scripts
字段查询是否有可执行的脚本,ant-design-vue-pro 是这么写的:
{ "scripts": { "serve": "vue-cli-service serve" } }
当运行 yarn serve
就相当于执行的是 vue-cli-service serve
,这个时候 nodejs
会尝试在 node_modules
下的 .bin
目录下查询 vue-cli-service
可执行性文件,如果找不到就会去全局安装的 node_modules
下查询可执行文件,如果还是找不到的话就会报错 command not found
。
我在 ant-design-vue-pro 的node_modules/.bin
下确实没有发现 vue-cli-service
可执行性文件。
现在就可以明确报错的原因就是 vue-cli-service
命令不存在,也就是 @vue/cli-service
这个包没有安装成功(vue-cli-service命令是由@vue/cli-service这个包安装后引入的)。
于是查看了工程下的 package.json
文件,发现在 package.json
的 devDependencies
字段中指定了 @vue/cli-service
:
{ "devDependencies": { "@vue/cli-service": "~5.0.8" } }
现在的问题就简化为:
在package.json中的devDependencies字段中指定的依赖包,在什么情况下会没有安装成功?
这个问题在 npm 文档 中找到了解答:
- "dependencies": Packages required by your application in production.
- "devDependencies": Packages that are only needed for local development and testing.
文档中明确了 devDependencies
中指定的依赖只有本地开发环境或者测试的时候才会安装,生产环境下只安装 dependencies
中指定的依赖。
现在问题又进一步缩小为:
npm,如何知道包是安装在开发环境还是生产环境?
继续查看 npm 文档,在 npm install 相关文档 中我们发现一段解释:
By default,
npm install
will install all modules listed as dependencies inpackage.json
.With the
--production
flag (or when theNODE_ENV
environment variable is set toproduction
), npm will not install modules listed indevDependencies
. To install all modules listed in bothdependencies
anddevDependencies
whenNODE_ENV
environment variable is set toproduction
, you can use--production=false
.
上面解释了,在安装依赖包的时候,通过 --production
参数或者 NODE_ENV
环境变量来区分当前处于开发模式还是处于生产模式。
到这里,问题已经很明确了,就是环境变量导致 ant-design-vue-pro 工程只有 dependencies
的依赖被安装了,而 devDependencies
的依赖被忽略了。
这个时候,我突然回想起一个细节,每次当我从 vscode
中打开终端(PS:我的终端默认使用的是zsh
加载全部内容