筆記: Vue Cli 一鍵部屬 Github Pages win10

目標：將本地端用 Vue Cli 建立的網站 Git Push 到 Github 並且打開 GitHub Pages。

在 Vue 專案資料夾下建立 deploy.sh。

在 deploy.sh 內建立以下內容：

set -e

originUrl=$(git config --get remote.origin.url)

nowStatus=${originUrl:0:5}

echo $nowStatus

if [ $nowStatus = 'https' ]

then

  echo '傳輸方式採用 HTTPs 模式'

  echo '目前遠端分支 URL：'$originUrl

else

  echo '傳輸方式採用 SSH 模式'

  echo '目前遠端分支 URL：'$originUrl

fi

npm run build

echo '移動目錄到編譯出來的 dist 資料夾'

cd dist

git init

git add .

git commit -m "update `date +'%Y-%m-%d %H:%M:%S'`";

git push -f $originUrl master:gh-pages

cd -

儲存檔案，然後先把編譯前的檔案 Push 到 GitHub 確定不會卡驗證。

筆者是用 VSCode 完成編譯前的檔案上傳。

下載 Git 並安裝。

https://gitforwindows.org/

開啟 Git Bash ，並 cd 到專案資料夾。

輸入 sh deploy.sh 。

最後回到 GitHub 儲存庫，Setting --> GitHub Pages 開啟並把分支設在 gh-pages 上。

過一陣子應該就可以讀出利用 Vue Cli 建立的 SPA 網站了。

參考資料：https://hsiangfeng.github.io/vue/20200214/1055437216/

筆記