Git Hub仓库自动部署流程

 注：（此创建流程须在网络代理状态下操作）

1.新建vue项目文件

在需要创建项目的文件夹内创建一个vue2或vue3的项目文件，并将项目文件git初始化，创建完成之后从VScode打开项目

（创建vue项目流程请自行在本人主页搜索）

2.提交并发布仓库

在VScode中暂存并提交所有文件，并发布：尽量在输入框中填写上提交动作，会加速提交

点击发布之后选择仓库状态，这里选择public（公开）状态

完成之后在Git Hub打开

3.仓库部署流程

在打开仓库之后，打开Actions标签

这里点击新建工作流

 在工作流中添加以下代码

name: Vue Deploy

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.PAT }}  # 此处修改为你的Secret名称
          publish_dir: ./dist

添加完成之后，点击Commit Changes按钮进行提交

提交之后进入Git Hub的settings页面

进入Developer settings

进入fine-grained tokens标签进行token设置

点击新建token

 根据下图流程完成创建tokne

这里点击复制创建好的token，注意先粘贴到自己随时能找到的地方，比如微信助手，以防丢失

进入刚刚创建好的仓库中的设置

进入Secrets and variables➡Actions标签

点击创建新储存库的密钥

根据下方图中提示创建密钥

这是我们需要配置一下打包后的目录，打开VScode➡vue.config.js文件中添加

”publicPath:'/my-repo/'“, 将my-repo换为我们的仓库名字

然后进行提交

等待配置完成后就可以啦

完成后进入仓库中的settings➡Pages就可以查看啦