效果

步骤

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

工作流

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

name: Build & Deploy Vue 3 Appon:push:branches: [main]permissions:contents: write  # 👈 给写入 gh-pages 分支的权限jobs:build-deploy:runs-on: ubuntu-lateststeps:- name: Checkout codeuses: actions/checkout@v3- name: Setup Node.jsuses: actions/setup-node@v4with:node-version: 18- name: Install dependenciesrun: npm install- name: Build projectrun: npm run build- name: Deploy to GitHub Pagesuses: peaceiris/actions-gh-pages@v3with:github_token: ${{ secrets.GITHUB_TOKEN }}publish_dir: ./dist

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