前言：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
4、在Git Bash上运行heroku git:remote -a 你之前heroku create所生成的随机名称（或者你已在heroku网站上新建的项目名称）
如果你之前没有使用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、然后进行如下操作：
这里说明下，如果第二步你没有项目，就在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
*本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢!
