vue 部屬到 GitHub Pages 上面 - Frank0321/taiwan_reservoir GitHub Wiki

vue 部屬到 GitHub Pages 的步驟

1. 確認 Github 上面有該專案

• 有此專案的 repository
• 發佈在 GitHub Pages 上時，會以預設的首頁為主

2. 在專案底下，新增 vue.config.js 與 deploy.sh

• 新增位置為專案目錄底下

  ├─ project     
  │ ├─ src            
  │ ├─ vue.config.js
  │ ├─ deploy.sh
  ...
  

• 新增後，並新增內容 :

  • vue.config.js 新增的內容 :

    module.exports = {
      publicPath: process.env.NODE_ENV === 'production'
        ? '/test20200915/' // test20200915 為 repo 名稱
        : '/'
    }
    

  • deploy.sh 新增的內容 :

    #!/usr/bin/env sh
    # 當發生錯誤時終止腳本運行
    set -e
    # 建立輸出檔案
    npm run build
    
    # 移動至到打包後的dist目錄 
    cd dist
    
    # 因為dist資料夾預設是被ignore的，因此在進入dist資料夾後初始化git
    git init 
    git add -A
    git commit -m 'deploy'
    
    # 將 dist資料夾中的內容推送至遠端 New-home 的 gh-pages 分支中，並強制無條件將舊有的內容取代成目前的內容（指令 git push -f)
    # https://github.com/YAngTsungJen/New-home.git 需替換成自己的 Github repo 去 Github 上複製
    git push -f https://github.com/YAngTsungJen/New-home.git master:gh-pages
    cd -
    
    # 執行指令，在終端機輸入 deploy.sh
    

3. 使用 Git 將資料推上去

1. 開啟 Git Bash
2. 指令如 cmd 的方式輸入，先 cd 到專案的目錄底下

或是在專案底下，右鍵點選 Git Bash here

3. 執行(輸入) sh deploy.sh

   $ sh deploy.sh
   

   
4. 執行成功後，會發現新增一個 gh-pages 分支

4. 設定 GitHub Pages

1. 開啟路徑 : GitHub -> repository -> setting -> Github Pages
2. source 設定為 gh-pages 與 /(root) 然後 save
3. 頁面更新有時需要等待幾分鐘

• Your site is published at https://frank0321.github.io/taiwan_reservoir/
• 發布的網址如 : https://frank0321.github.io/taiwan_reservoir/

5. 後續更新

1. 先更新並發布到 master 上面
2. 如步驟 3 ，再次更新到 gh-pages 上面即可

參考資料

• Vue Cli 3 部屬到 Github 上