天天看点

Heroku部署vue项目失败:sh: 1: vue-cli-service: not found

剧情介绍

最近写了一个

Express

+

Vue

前后端项目demo,打算部署到Heroku

部分目录结构如下

server.js           // Express提供数据接口
package.json

client/             //  Vue前端显示数据
    package.json
          

整个项目都保存到Github上,让Heroku自动部署

前端项目不能在本地打包,不然dist目录将会进入git,这样不太好

所以,部署的时候需要在线上完成打包操作

package.json如下

"scripts": {
    "postinstall": "npm run client-install && npm run client-build",
    "client": "npm start --prefix client",
    "client-build": "npm run build --prefix client",
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js --ignore client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },      

client/package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "start": "npm run serve"
  },      

Heroku会自动执行 :

postinstall -> start

所以我在 postinstall 中对client前端项目进行了【依赖安装】和【项目打包】

上面的两个配置文件,在本地执行是没有问题的,

Heroku线上部署

到了Heroku线上部署报错了:

sh: 1: vue-cli-service: not found      

截图:

Heroku部署vue项目失败:sh: 1: vue-cli-service: not found

网上的文章,大致说了3个解决方法

1、重新安装

将 文件夹

node_modules

删除在执行

npm install

进行重新安装

2、指定路径

./node_modules/.bin/vue-cli-service  build      

3、全局安装

npm install @vue/cli-service -g      

线下环境确实没问题,不过到了Heroku线上部署就无效

问题解决

进过多番百度,发现有类似文章提到了一个环境变量

NODE_ENV=production

查看部署日志,果然发现了类似的设置,Heroku很热心的给我设置了环境变量

Heroku部署vue项目失败:sh: 1: vue-cli-service: not found

修改环境变量

{
"postinstall": "NODE_ENV=development && npm run client-install && npm run client-build && NODE_ENV=production"
}      

总算部署成功了

Heroku部署vue项目失败:sh: 1: vue-cli-service: not found

最后的package.json文件

"scripts": {
    "postinstall": "NODE_ENV=development && npm run client-install && npm run client-build && NODE_ENV=production",
    "client": "npm start --prefix client",
    "client-build": "npm run build --prefix client",
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js --ignore client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  }      

部署完后的地址

https://web-node-app.herokuapp.com/

参考

linux 搭建 jenkins 前端自动构建时,老是提示 sh: vue-cli-service: command not found