將 Vue 專案部署至 GitHub Pages 服務

Deployment
, , , ,

做法

修改 vue.config.js 檔，將 publicPath 設置為以專案名稱為名的資料夾路徑。

1
2
3
4
5
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/<REPO>/'
    : '/'
}

新增 deploy.sh 部署腳本。

1
2
3
4
5
6
7
8
9
10
11
12
#!/usr/bin/env sh

set -e
npm run build
cd dist

git init
git add -A
git commit -m 'deploy'
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

執行部署腳本。

1
sh deploy.sh

最後，至專案的 GitHub Pages 頁面，將分支設置為 gh-pages。

參考資料