vue專案使用github線上預覽

當你在公司與 IT 人員合作，你只需把製作好的靜態檔案交給 IT 人員，他們會幫你部署到雲端空間，可是如果你只是在家裡自己想展示一件作品在線上環境，那可以使用 github pages 完成簡單的部署。
像是： 範例網站

1.vue router.js請使用hash mode，不要使用history

export default new Router({
    mode: "hash",
    routes: []
})

2. 新增一隻擋案在根目錄叫做 deploy.sh，貼上以下內容，網址改成倉庫網址

set -e
yarn build
cd dist
git init
git add -A
git commit -m 'deploy'
git push -f ${倉庫位置} master:gh-pages
cd -

倉庫位置：
— 如果倉庫是使用「Clone with HTTPS」，就輸入網址，例如

$ git push -f https://github.com/JessicaHuang210/vue-spotify.git master:gh-pages

— 如果倉庫是使用「Clone with SSH」，就輸入位置，例如

$ git push -f git@github.com:JessicaHuang210/vue-spotify.git master:gh-pages

3. router中設定首頁的path為預設

{
    path: "",
    name: "Home",
    component:  () => import("./views/Home.vue")
}

4. vue.config.js中設置publicPath

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "/vue-spotify/" : "/"
}

5. 在package.json中 script項目新增指令：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "start": "open http://localhost:8888 && PORT=8888 serve -s dist",
    "push_PROD": "sh deploy.sh prod" // add this line
}

6. 進入github中的專案，點選setting

往下捲動，找到GitHub Pages，打開source下拉選單，選擇gh-pages分支

選好之後，會產生一段網址 https://${你的github帳號}.github.io/${你的專案名稱}

7. 打開終端機，進入專案資料夾，執行剛剛的build指令，然後等他跑完（要跑很久）

$ cd vue-spotify
$ yarn build_PROD

8. 完整網址：https://${你的github帳號}.github.io/${你的專案名稱}
這樣，別人點這個網址就可以直接看到網站了！

---

注意：
如果沒有使用gh-pages分支，就會把原始碼整個部署成dist資料夾裡的東西，就無法版控原始碼了。
文章內容參考 Vue Cli 部署