Osheep

时光不回头,当下最重要。

如何将vue项目部署至heroku上以供外网访问

前言:google和百度发现将vue项目部署至heroku上的资料很少,在medium.com找到老外的两篇相关文章,但按照他们的步骤会报错,后来自己结合heroku官方文档及老外的文章介绍逐渐理清了相关思路。。。

如果vue项目没有后台的话,我们直接使用npm run build 后在dist目录就可以直接看到index.html、css及js相关资源。如果想部署至外网,我们可以采用github pages、coding及码云提供的静态服务进行部署。他们间的部署比较简单,我就不啰嗦了。部署前注意以下两点即可:
1、部署前记得将 config/index.js文件中的assetsPublicPath: '/', 修改为assetsPublicPath: './',
2、在push代码前记得将根目录中的.gitignore文件中的dist一行删除,否则git会忽略dist文件夹的。

但是如果有后台的话就不是之前所讲的部署方法了,其部署方法就是这篇文章的主题啦—–如何将vue项目部署至heroku上:
本文以基于vue脚手架vue-cli的项目为例讲述如何将其部署在heroku上以供外网访问。进入下面的步骤前确保你安装了Heroku CLI(安装完后在Git Bash上运行)及 注册和登录了heroku (heroku login

一、采用Heroku CLI在本地项目根目录部署的方法

1、在项目根目录中的package.json文件中的 scripts 部分增加以下两句:
"postinstall": "npm run build",
"start": "node server.js"

同时将原有的"start": "node build/dev-server.js", 一行删除。(注释掉会报错!!!)

2、在项目根目录中创建server.js文件,其中的代码如下:
var express = require('express')
var path = require('path')
var serveStatic = require('serve-static')

var app = express()
app.use(serveStatic(path.join(__dirname, 'dist')))

var port = process.env.PORT || 5000
app.listen(port)
console.log('server started ' + port)
3、在Git Bash上运行heroku create
《如何将vue项目部署至heroku上以供外网访问》

image.png
4、在Git Bash上运行heroku git:remote -a 你之前heroku create所生成的随机名称(或者你已在heroku网站上新建的项目名称)

《如何将vue项目部署至heroku上以供外网访问》

image.png

如果你之前没有使用git,则需要运行git init

完成后我们在项目根目录中的.git/config中发现多出了这些

[remote "heroku"]
    url = https://git.heroku.com/fierce-headland-77916.git
    fetch = +refs/heads/*:refs/remotes/heroku/*
5、在Git Bash上运行heroku config:set NPM_CONFIG_PRODUCTION=false

NPM_CONFIG_PRODUCTION=true 的意思是默认只安装dependencies里的依赖不安装devDependencies里的依赖,我们设为false就是让它也安装devDependencies里的依赖。当然,此时你手动将package.json中的devDependencies里的所有依赖剪切至devDependencies里也可以到达相同效果,但不推荐啦。

6、在Git Bash上运行heroku buildpacks:set heroku/nodejs

意思是让heroku以Node.js服务器运行。

7、部署(部署前记得已经 npm run build 了)
$ git add .
$ git commit -am "make it better"
$ git push heroku master

二、采用连接github的方式部署

1、如果使用github的方式则需按照上面的第一方法第1步及第2步修改package.json及新增server.js后,手动将package.json中的devDependencies里的所有选项(依赖)剪切至devDependencies中。
2、将 config/index.js文件中的assetsPublicPath: '/', 修改为assetsPublicPath: './',
3、将根目录中的.gitignore文件中的dist一行删除,否则git会忽略dist文件夹的。
4、运行 npm run build 以生成dist
5、push至github
6、然后进行如下操作:

《如何将vue项目部署至heroku上以供外网访问》

image.png

这里说明下,如果第二步你没有项目,就在heroku上新建下。。。

三、采用Heroku CLI在dist目录下部署的方法

其实也是类似的;

1、首先肯定要npm run build以生成dist目录和相应的文件及在项目根目录中.gitignore删除dist一行;
2、在dist目录下新建package.json及server.js文件

package.json

{
 "name": "blog",
 "version": "1.0.0",
 "description": "personalblog",
 "author": "Awesome Author",
 "private": true,
 "scripts": {
   "postinstall": "npm install express"
 }
}

server.js

var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);
3、设置本地git仓库

在git bash进行如下操作:

cd   项目根目录
heroku create
heroku git:remote -a  之前heroku create所生成的随机名称(或者你已在heroku网站上新建的项目名称)
4、设置运行环境
heroku buildpacks:set heroku/nodejs
5、部署
$ git add .
$ git commit -am "make it better"
$ git subtree push --prefix dist heroku master
//这条命令的意思是只将dist push至heroku上

三、参考资料

1、How to deploy a Vue.js app to Heroku
2、heroku官方文档–git相关
3、heroku官方文档–NodeJS相关
4、Quick-n-clean way to deploy Vue + Webpack apps on Heroku

*本文版权归本人即简书笔名:该账户已被查封 所有,如需转载请注明出处。谢谢!

点赞