乐趣区

关于vue-cli:vuecliservice-command-not-found报错引发的血案

jiezi

最近因为工作须要，开始学习 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...

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

退出移动版