效果

步骤

• 新建仓库
• 设置仓库的 page
  
• 新建一个 vite 的项目，改一下 vite.config.js 中的 base
  

工作流

在项目的根目录下新建一个 .github/workflows/ci.yml 文件，然后编辑一下内容

name: Build & Deploy Vue 3 App

on:
  push:
    branches: [main]

permissions:
  contents: write  # 👈 给写入 gh-pages 分支的权限

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

这样的话，会监控 main 分支的改动，然后自动部署代码到 gh-pages 分支上