Heroku部署vue项目失败:sh: 1: vue-cli-service: not found-阿里云开发者社区

开发者社区> 程序猿v> 正文

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

简介: 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

截图:

15.1.png


网上的文章,大致说了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很热心的给我设置了环境变量

15.2.png


修改环境变量

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

总算部署成功了

15.3.png


最后的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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
项目交付为什么失败?-记我在某个项目中的迷思
上个项目接近尾声,我以developer的身份加入了现在的项目,姑且叫做项目A吧。说实话A项目蛮神奇的,干了一年多了只有一次release,8月初要进行第二次release了,但是测试环境还未搭建好。
831 0
Visual Studio 2015中创建C#的Android项目提示"Value cannot be null"的解决方法
原文:Visual Studio 2015中创建C#的Android项目提示"Value cannot be null"的解决方法 选择C# > Android创建一个Blank App时提示如下错误: Value cannot be null. Parameter name: path1 由于之前本机已安装过Android SDK,在安装Visual Studio 2015时跳过了,并没有为Xamarin指定对应路径导致。
954 0
+关注
1569
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载