1. 實現自動化部署

1.1. 創建 vue 項目

# 1. 安裝/確認 Node.js（>=14）
node -v   # 推薦 20.x# 2. 創建項目（交互式，選 Vue3 + Router 等）
npm init vue@latest github-actions-demo   # 創建vite項目
# 或：vue create github-actions-demo # 創建 vuecli項目
cd github-actions-demo# 3. 安裝依賴 & 本地預覽
npm install
npm run dev   # 瀏覽器打開驗證看能否正常運行

1.2. 配置基礎路徑

把 vite.config.ts / vue.config.js 里的 基礎路徑 設好，避免白屏。

• Vite：base: '/倉庫名/'
• Vue CLI：publicPath: '/倉庫名/'

打開 vite.config.js（沒有則新建）并寫入：

import {fileURLToPath, URL} from "node:url";import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";
import vueDevTools from "vite-plugin-vue-devtools";// https://vite.dev/config/
export default defineConfig({plugins: [vue(), vueDevTools()],resolve: {alias: {"@": fileURLToPath(new URL("./src", import.meta.url)),},},base: "/github-actions-demo/", // 配置基礎路徑為倉庫名
});

注意：一定要與倉庫名一致否則會出現找不到資源的問題！！

1.3. 編寫 GitHub Actions Workflow

創建文件 .github/workflows/deploy.yml，復制下面內容：

# GitHub Actions 工作流名稱（隨便取）
name: Deploy Vue 項目到 GitHub Pages# 觸發條件：當推送到 main 分支時觸發
on:push:branches: [main]# 給 GITHUB_TOKEN 授權（否則后面無法部署 Pages）
permissions:contents: read     # 允許讀取倉庫內容pages: write       # 允許寫入 GitHub Pages（發布）id-token: write    # 允許 OIDC 身份驗證（部署時需要）jobs:# 第一個 Job：構建項目build:runs-on: ubuntu-latest  # 在 GitHub 提供的 Ubuntu 最新虛擬機上運行steps:# 1. 檢出（checkout）代碼- uses: actions/checkout@v4# 2. 安裝 Node.js 環境- uses: actions/setup-node@v4with:node-version: 20  # 指定 Node.js 版本為 20cache: npm        # 啟用 npm 緩存，加快安裝速度# 3. 安裝依賴（等價于 npm install，但 npm ci 更快、更穩定）- run: npm ci# 4. 構建打包（Vite 會把代碼打包到 dist 文件夾）- run: npm run build# 5. 上傳打包好的 dist 文件夾，作為 artifact 供后續部署使用- uses: actions/upload-pages-artifact@v3with:path: ./dist  # 指定要上傳的文件夾# 第二個 Job：部署到 GitHub Pagesdeploy:needs: build  # 必須等 build 任務完成后再執行runs-on: ubuntu-latestenvironment:name: github-pages  # 指定部署環境名稱（固定寫法）url: ${{ steps.deployment.outputs.page_url }} # 部署完成后生成的訪問 URLsteps:# 6. 使用 GitHub 官方的 Pages 部署 Action- uses: actions/deploy-pages@v4id: deployment  # 給這個步驟起個 ID，方便引用它的輸出變量

1.4. 本地 Git 初始化并推送到 GitHub

# 1. 新建倉庫（若已 fork/clone 可跳過）
#    GitHub → New repository → 取名 action_vue → 不初始化 README
# 2. 關聯遠程
git init
git add .
git commit -m "feat: init vue cli project"
git branch -M main
git remote add origin https://github.com/xxxx/xxxx.git # 替換成自己的路徑
git push -u origin main

這一階段是要把所有代碼都提交到倉庫上，使用 VScode 自帶的 git 工具提交也可以。

1.5. 驗證 Actions 運行

回到倉庫 → Actions 標簽頁，應出現綠色對勾 ?。

1.6. 開啟 Pages 服務

1. Settings → Pages → Source 選 GitHub Actions。
2. 等 2-3 分鐘 ，Pages 會提示部署成功，顯示：Your site is live at https://<用戶名>.github.io/<倉庫名>/，訪問這個地址就能看到線上版本。