步骤如下

首先需要准备一个vue3的项目，上传到github上，如图所示，项目自定义就行。

新建一个新的分支，分支名随意就行，这里用的是gh-pages，清空分支里的所有内容，推到github上去。

接下来就是要设置Action

点图中的New workflow，随便选一个点进去

然后改下里的内容，给它修改成这样, 点 commit changes

来看下这段yaml的含意

## 定义这个action的名
name: Deploy with Github Pages

## 触发action的条件，
## 当有推送代码时，且分支是 main
## 当有pr时，且分支是 main
on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

permissions:
  contents: write

jobs:
  build:
    concurrency: ci-${{ github.ref }}
    runs-on: ubuntu-latest
    steps:

      ## 检出代码
      - name: Checkout 🛎️
        uses: actions/checkout@v3
      
      ## 打包
      - name: Install and Build 🔧 
        run: |
          npm install
          npm run build

      ## 将打包完的dist下的文件推送到gh-pages分支
      - name: Deploy to GitHub Pages 🚀
        id: deployment
        uses: JamesIves/github-pages-deploy-action@v4
        with: 
          branch: gh-pages
          folder: dist

这一步完事后，每次提交代码就会看到在action里有自动构建。构建完后gh-pages分支就有东西了。

设置pages

到这里就是所有的github上的设置了，每次提交代码，就会将代码打包推到gh-pages分支，然后就能通过提示的url进行访问了。