剧情介绍
最近写了一个
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
截图:
网上的文章,大致说了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很热心的给我设置了环境变量
修改环境变量
{
"postinstall": "NODE_ENV=development && npm run client-install && npm run client-build && NODE_ENV=production"
}
总算部署成功了
最后的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