vue项目报错vue-cli-service: command not found

一、从git上下载的项目运行npm run serve 报错：?

$ vue-cli-service serve 
/bin/sh: vue-cli-service: command not found

原因分析：

当运行 npm run serve 就相当于执行的是 vue-cli-service serve，这个时候 nodejs 会尝试在 node_modules 下的 .bin 目录下查询 vue-cli-service 可执行性文件，如果找不到就会去全局安装的 node_modules 下查询可执行文件，如果还是找不到的话就会报错 command not found。

我在项目的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：

二、在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 中指定的依赖。

首先要创键三个文件，分别为.env.development（开发环境） ? .env.production（生产环境） .env.test（测试环境），跟package.json目录是同级文件。

.env.development文件代码
# 开发环境
NODE_ENV = development
VUE_APP_PREVIEW = true
VUE_APP_MODE = development
VUE_APP_BASE_URL = https://*****/index.php/

.env.production文件代码
# 生产环境
NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_BASE_URL = 'https://******/index.php/'
.env.test文件代码
# 测试环境
NODE_ENV = test
VUE_APP_MODE = test
VUE_APP_BASE_URL = http://49.94.4.21/
需要在package.json配置 --mode NODE_ENV起的名字

package.json 文件：?

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --open --mode development",
    "serve:dev": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "element-ui": "^2.15.5",
    "less": "^4.1.1",
    "less-loader": "^5.0.0",
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "qrcode": "^1.4.4",
    "swiper": "^5.4.5",
    "vee-validate": "^2.2.15",
    "vue": "^2.6.11",
    "vue-lazyload": "^1.3.3",
    "vue-router": "^3.5.2",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

修改好之后再次执行npm i --save成功安装@vue/cli-service包，项目可以正常运行起来。