前言：google和百度發(fā)現(xiàn)將vue項(xiàng)目部署至heroku上的資料很少孟岛，在medium.com找到老外的兩篇相關(guān)文章黎棠，但按照他們的步驟會(huì)報(bào)錯(cuò)赊舶，后來自己結(jié)合heroku官方文檔及老外的文章介紹逐漸理清了相關(guān)思路魄宏。罕袋。。
如果vue項(xiàng)目沒有后臺(tái)的話亮蛔，我們直接使用npm run build 后在dist目錄就可以直接看到index.html痴施、css及js相關(guān)資源。如果想部署至外網(wǎng)，我們可以采用github pages辣吃、coding及碼云提供的靜態(tài)服務(wù)進(jìn)行部署动遭。他們間的部署比較簡(jiǎn)單，我就不啰嗦了神得。部署前注意以下兩點(diǎn)即可：
1厘惦、部署前記得將 config/index.js文件中的assetsPublicPath: '/', 修改為assetsPublicPath: './',
2、在push代碼前記得將根目錄中的.gitignore文件中的dist一行刪除哩簿，否則git會(huì)忽略dist文件夾的宵蕉。
但是如果有后臺(tái)的話就不是之前所講的部署方法了，其部署方法就是這篇文章的主題啦-----如何將vue項(xiàng)目部署至heroku上：
本文以基于vue腳手架vue-cli的項(xiàng)目為例講述如何將其部署在heroku上以供外網(wǎng)訪問节榜。進(jìn)入下面的步驟前確保你安裝了Heroku CLI（安裝完后在Git Bash上運(yùn)行）及 注冊(cè)和登錄了heroku （heroku login）
一国裳、采用Heroku CLI在本地項(xiàng)目根目錄部署的方法
1、在項(xiàng)目根目錄中的package.json文件中的 scripts 部分增加以下兩句：
"postinstall": "npm run build",
"start": "node server.js"
同時(shí)將原有的"start": "node build/dev-server.js", 一行刪除全跨。（注釋掉會(huì)報(bào)錯(cuò)！Ｒ谒臁Ｅㄈ簟）
2、在項(xiàng)目根目錄中創(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上運(yùn)行heroku create
4、在Git Bash上運(yùn)行heroku git:remote -a 你之前heroku create所生成的隨機(jī)名稱（或者你已在heroku網(wǎng)站上新建的項(xiàng)目名稱）
如果你之前沒有使用git耳舅，則需要運(yùn)行
git init
完成后我們?cè)陧?xiàng)目根目錄中的.git/config中發(fā)現(xiàn)多出了這些
[remote "heroku"]
url = https://git.heroku.com/fierce-headland-77916.git
fetch = +refs/heads/*:refs/remotes/heroku/*
5碌上、在Git Bash上運(yùn)行heroku config:set NPM_CONFIG_PRODUCTION=false
NPM_CONFIG_PRODUCTION=true 的意思是默認(rèn)只安裝dependencies里的依賴不安裝devDependencies里的依賴，我們?cè)O(shè)為false就是讓它也安裝devDependencies里的依賴浦徊。當(dāng)然馏予，此時(shí)你手動(dòng)將package.json中的devDependencies里的所有依賴剪切至devDependencies里也可以到達(dá)相同效果，但不推薦啦盔性。
6霞丧、在Git Bash上運(yùn)行heroku buildpacks:set heroku/nodejs
意思是讓heroku以Node.js服務(wù)器運(yùn)行。
7冕香、部署（部署前記得已經(jīng) npm run build 了）
$ git add .
$ git commit -am "make it better"
$ git push heroku master
二蛹尝、采用連接github的方式部署
1、如果使用github的方式則需按照上面的第一方法第1步及第2步修改package.json及新增server.js后悉尾，手動(dòng)將package.json中的devDependencies里的所有選項(xiàng)（依賴）剪切至devDependencies中突那。
2、將 config/index.js文件中的assetsPublicPath: '/', 修改為assetsPublicPath: './',
3构眯、將根目錄中的.gitignore文件中的dist一行刪除愕难，否則git會(huì)忽略dist文件夾的。
4、運(yùn)行 npm run build 以生成dist
5务漩、push至github
6拄衰、然后進(jìn)行如下操作：
這里說明下，如果第二步你沒有項(xiàng)目饵骨，就在heroku上新建下翘悉。。居触。
三妖混、采用Heroku CLI在dist目錄下部署的方法
其實(shí)也是類似的；
1轮洋、首先肯定要npm run build以生成dist目錄和相應(yīng)的文件及在項(xiàng)目根目錄中.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弊予、設(shè)置本地git倉(cāng)庫(kù)
在git bash進(jìn)行如下操作：
cd 項(xiàng)目根目錄
heroku create
heroku git:remote -a 之前heroku create所生成的隨機(jī)名稱（或者你已在heroku網(wǎng)站上新建的項(xiàng)目名稱）
4祥楣、設(shè)置運(yùn)行環(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相關(guān)
3碾褂、heroku官方文檔--NodeJS相關(guān)
4兽间、Quick-n-clean way to deploy Vue + Webpack apps on Heroku
*本文版權(quán)歸本人即簡(jiǎn)書筆名：該賬戶已被查封 所有，如需轉(zhuǎn)載請(qǐng)注明出處正塌。謝謝!
