$ 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
:
这个问题在 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包,项目可以正常运行起来。