前言：google和百度發(fā)現將vue項目部署至heroku上的資料很少，在medium.com找到老外的兩篇相關文章，但按照他們的步驟會報錯，后來自己結合heroku官方文檔及老外的文章介紹逐漸理清了相關思路。。。
如果vue項目沒有后臺的話，我們直接使用npm run build 后在dist目錄就可以直接看到index.html、css及js相關資源。如果想部署至外網，我們可以采用github pages、coding及碼云提供的靜態(tài)服務進行部署。他們間的部署比較簡單，我就不啰嗦了。部署前注意以下兩點即可：
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", 一行刪除。（注釋掉會報錯?。。。?/p>
2、在項目根目錄中創(chuàng)建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中發(fā)現多出了這些
[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、設置運行環(huán)境
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
*本文版權歸本人即簡書筆名：該賬戶已被查封 所有，如需轉載請注明出處。謝謝!
