1、首先，确保你已经创建了一个 GitHub 仓库，并将 Vue 项目推送到该仓库中。
2、新建一个 gh-pages分支，于存储打包后的文件,新建分支并初始化执行以下命令：
1）新建分支
git checkout --orphan gh-pages
2）从当前目录中删除所有文件和文件夹（包括隐藏文件），并将这些删除操作记录为暂存区的更改（除了 Git 的配置文件 .git/ 目录）。
git rm -rf
3）创建一个README.md 文件并写入 # GitHub Pages 这一行内容。echo 命令会将其后的文本输出到文件中。
echo "# GitHub Pages" > README.md
4）将README.md提交到本地分支
git add README.md
git commit -m "Initialize gh-pages branch
5）将 gh-pages 分支推送到远程仓库
git push origin gh-pages
注意：如果你不需要初始化 README.md 文件，也不需要在 gh-pages 分支中保留其他文件，以下命令是可以省略的：
-
git rm -rf .：如果你不打算删除任何文件或目录。 -
echo "# GitHub Pages" > README.md：如果你不需要README.md文件。 -
git add README.md和git commit -m "Initialize gh-pages branch"：如果你没有任何文件需要提交。
3、配置vue.config.js将 <repository> 替换为你的仓库名。
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/<repository>/'
: '/' };
4、创建GitHub Actions工作流，用于在推送到 main 分支时自动构建你的 Vue 项目并将其部署到 GitHub Pages。
在main分支根目录下创建一个名为 .github/workflows/gh-pages.yml 的文件，内容如下（附注释）：
name: Deploy to GitHub Pages # 定义工作流的名称
on:
push: # 当有代码推送时触发
branches:
- main # 仅在推送到 main 分支时触发
jobs:
build-deploy: # 定义一个名为 build-deploy 的作业
runs-on: ubuntu-latest # 指定在最新的 Ubuntu 环境中运行
steps: # 定义作业中执行的一系列步骤
- name: Checkout repository # 第一步：检出代码库
uses: actions/checkout@v3 # 使用官方 checkout Action 检出代码
- name: Set up Node.js # 第二步：设置 Node.js 环境
uses: actions/setup-node@v3 # 使用官方 setup-node Action 设置 Node.js
with:
node-version: '18' # 指定要安装的 Node.js 版本为 18
- name: Install dependencies # 第三步：安装项目依赖
run: npm install # 运行 npm install 命令安装依赖
- name: Build the project # 第四步：构建项目
run: npm run build # 运行 npm run build 命令打包项目
- name: Deploy to GitHub Pages # 第五步：部署到 GitHub Pages
uses: peaceiris/actions-gh-pages@v3 # 使用 peaceiris 的 gh-pages Action
with:
github_token: ${{ secrets.GITHUB_TOKEN }} # 使用自动生成的 GITHUB_TOKEN 进行身份验证
publish_dir: ./dist # 指定要部署的文件目录为 ./dist
5、 检查 GitHub Actions 运行状态
推送代码后，GitHub Actions 会自动运行工作流，将项目打包并部署到 gh-pages 分支。你可以在 GitHub 仓库的 "Actions" 选项卡中查看工作流的运行状态。
6、 配置 GitHub Pages
1）在Settings里找到Pages
2）分支选择为你刚刚创建的gh-pages分支目录选择根目录并保存
7、 检查 GitHub Actions 的仓库权限
1）进入仓库的 Settings > Actions > General
2）找到Workflow permissions确保选择了 Read and write permissions，以确保 GITHUB_TOKEN 有足够的权限推送到仓库。注：这里默认是只读权限Read repository contents and packages permissions
