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

我心飞翔 分类:vue

最近因为工作需要,开始学习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 安装依赖包的问题,于是换了 npmpnpm 进行依赖包的安装,结果依然是启动报错。

嘿嘿,到这里其实就开始觉得这个问题不简单了,怀疑这么严重的问题肯定不是我一个人遇到过,经过一番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.jsondevDependencies 字段中指定了 @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.josndevDependencies 指定的依赖都没有被安装!

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

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

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

回复

我来回复
  • 暂无回复内容