Vue Cli 2.x部屬GithubPage

因為Vue Cli在部屬上Github上有不同做法，這邊先記錄一下網路上查到的一些作法。
 以下採用git指令方式新增，都是已經在github上創建repo為前提。

vue cli將檔案匯出成部屬模式

npm run build

新增分支(通常都是叫gh-pages)

git checkout -b gh-pages

將輸出的dist加入索引

git add -f dist

p.s這邊不要輸入以下，會被提示建議輸入-f

git add . dist

新增commit資訊

git commit -m 'first vue'

最後就是push出去並啟用github pages，這樣就可以看到gh-pages展示頁面了

git subtree push --prefix dist origin gh-pages

如果不確定連結可以進入repo setting

拉到下面可以看到標題叫GitHub Pages綠色欄位就是網址了。

參考:https://www.jianshu.com/p/cc053119f119


接下來講一些可能會踩到的雷點
在做轉出部屬模式之前，最好進去vue的config中調整一下幾個檔案
1.config/prod.env.js
如果你有寫一些自定義變數放在dev.env.js中，一定要記得將東西放進來這支JS，否則會出現錯誤
2.config/index.js
拉到下方約46行會看到build，這邊需要修改assetsPublicPath，否則部屬後連結有可能會找不到

 這樣子是為了將路徑改成相對路徑而非絕對路徑，如果是單純的'/'是有可能會找不到檔案。

3.build/utils.js
如果CSS中有撰寫這種->backgroud-image: url(../../assets/img/xxx.jpg);
應該會發現會找不到檔案，然後檔案路徑會很奇怪，然後圖片抓不到，這邊要這樣修改

fallback: 'vue-style-loader'

下方再新增一行

publicPath: '../../'

這樣寫在CSS中的backgroud-image: url(../../assets/img/xxx.jpg);就可以正常取得圖片了(毛毛蟲自動忽略，因為使用airbnb關係)