Vue CLI GitHub Pages 佈署

說明

要將 Vue CLI 專案佈署至 GitHub Pages 有以下幾個要點

1. 調整設定檔 build 專案
2. 佈署至 github pages
3. 避免重整頁面 404 問題
4. 參考資料

 

一、 調整設定檔 build 專案

首先要調整 vue.config.js 設定檔，將 GitHub repo 的名稱加入設定檔，可參考文件

//vue.confing.js

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/your-repo-name/'
    : '/'
}

 

二、佈署至 GitHub Pages

寫一支 Shell Script 檔案，deploy.sh 執行會自動推送 gh-pages 分支

#!/usr/bin/env sh

npm run build
cd dist
git init
git add -A
git commit -m 'deploy'
git push -f <https://github.com/>{{Github Username}}/{{RepositoryName}}.git master:gh-pages

推送後就可以在 GitHub Pages 看到 Vue CLI 專案

 

三、避免重整頁面 404 問題

GitHub Pages 是完全靜態的 Server，Router 使用 history mode 時

重整頁面會因為找不到 index.html 而出現 404 頁面

不了解原因這邊有一篇靜態網頁對於 SPA Router 原理的文章可以參考

SPA Router 是用 # 來進行單頁切換，又使用 history mode 來將 # 移除

解決方法有二種：

1. 使用 hash mode

   // router/index.js
   export default new Router({
     mode: 'hash',
     base: '/your-repo-name',
   )}
   

2. 設置 404 頁面轉向 index.html

   在 history mode 的情況下要能正常重整頁面

   只要將 build 後根目錄的 index.html 複製一份 404.html

   讓網頁導轉至 404.html 時回到 index.html 即可

   讓我們來調整一下 deploy.sh

   #!/usr/bin/env sh
   
   npm run build
   cd dist
   cp -p index.html 404.html # add 404.html 
   git init
   git add -A
   git commit -m 'deploy'
   git push -f <https://github.com/ivanjo39191/ivankaoblog-frontend.git> master:gh-pages
   

   至此 GitHub Pages 的佈署就完善了。

 

四、參考資料

https://cli.vuejs.org/zh/config/#全局-cli-配置

https://github.com/aszx87410/blog/issues/48

https://siddharam.com.tw/post/20190929/

https://penueling.com/技術筆記/vue專案使用github線上預覽/

---