vue-cli-service: command not found报错引发的血案

最近因为工作需要，开始学习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检索，发现确实有人遇到过类似的问题，提出了如下几种解决方法：

1. 删除 node_modules 和 lock 文件，重新安装依赖包
2. 使用npm安装依赖包，不要使用yarn
3. 既然报错 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 in package.json.

With the --production flag (or when the NODE_ENV environment variable is set to production), npm will not install modules listed in devDependencies. To install all modules listed in both dependencies and devDependencies when NODE_ENV environment variable is set to production, you can use --production=false.

上面解释了，在安装依赖包的时候，通过 --production 参数或者 NODE_ENV 环境变量来区分当前处于开发模式还是处于生产模式。

到这里，问题已经很明确了，就是环境变量导致 ant-design-vue-pro 工程只有 dependencies 的依赖被安装了，而 devDependencies 的依赖被忽略了。

这个时候，我突然回想起一个细节，每次当我从 vscode 中打开终端(PS:我的终端默认使用的是zsh😜)的时候，终端都会有一个如下的提示：

dotenv: found '.env' file. Source it? ([Y]es/[n]o/[a]lways/n[e]ver) 

通常遇到这个提示的时候我不会很在意，一般都会选择 Yes，这样如果我们的工程下存在 .env 文件，zsh 终端会自动读取环境变量，并设置到当前环境中。

于是我赶紧查看了 ant-design-vue-pro 工程下的 .env 环境变量，果然看到了 NODE_ENV 的值被设置成了 production🤷‍♀️。

NODE_ENV=production
VUE_APP_PREVIEW=false
VUE_APP_API_BASE_URL=/api

到这里其实就真相大白了 -- 就是我使用的zsh终端惹的祸😂。

终端启动的时候自动解析了工程根目录下的 .env 配置文件，配置文件里面恰巧又将 NODE_ENV 环境变量设置成了 production，导致 package.josn 中 devDependencies 指定的依赖都没有被安装！

说到这里，其实这个问题就彻底被定位了，解决方法很简单，就是把环境变量设置为 NODE_ENV=development 重新安装一下依赖就能正常装包了。

试了一下，果然一把成功，perfect ！又看到了熟悉的vue启动画面，嘿嘿，晚上又可以给自己加个鸡腿了😋

yarn serve
yarn run v1.18.0
$ vue-cli-service serve
 INFO  Starting development server...

更多精彩文章欢迎关注我的公众号[前端架构师笔记]