亲宝软件园·资讯

展开

关于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 安装依赖包的问题,于是换了 npmpnpm 进行依赖包的安装,结果依然是启动报错。

嘿嘿,到这里其实就开始觉得这个问题不简单了,怀疑这么严重的问题肯定不是我一个人遇到过,经过一番Google检索,发现确实有人遇到过类似的问题,提出了如下几种解决方法:

方法一和方法二上面其实已经尝试过了,是不行的,方法三虽然可能可行,但是显然全局安装 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-pronode_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

加载全部内容

相关教程
猜你喜欢
用户评论