做法
首先，修改 vite.config.js 檔，將 base 設置為以專案名稱為名的資料夾路徑。
1
2
3
4
5
6
7
8
9
10
| import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
base: process.env.NODE_ENV === 'production'
? '/<REPO_NAME>/'
: '/',
});
|
到 GitHub 的專案頁面，點選「Settings」頁籤，點選「Actions」的「General」選單，將「Workflow permissions」設置為「Read and write permissions」。
然後，在專案的 .github/workflows 資料夾新增 gh-pages.yaml 檔。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| name: GitHub Pages
on:
push:
branches:
- main
pull_request:
jobs:
deploy:
runs-on: ubuntu-latest
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- uses: actions/checkout@v3
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: '14'
- name: Cache dependencies
uses: actions/cache@v2
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- run: npm ci
- run: npm run build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: ${{ github.ref == 'refs/heads/main' }}
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
|
推送程式碼。
1
2
3
| git add .
git commit -m "Add deploy script"
git push
|
再回到 GitHub 的專案頁面，點選「Settings」頁籤，將「Pages」的「Branch」設置為「gh-pages」。
參考資料