gitHub Actions自动部署vue

创建配置文件

1. 在GitHub上创建一个新的仓库，并将Vue项目上传到该仓库

         

         在git bash链接远端并上传

git remote add origin url
git push -u origin main

           注意：上传git时需分支是否相同，如不相同需要更改 

git bash流程

 2.配置main.yml文件

 点击Actios选中set up a workflow yourself 

点击后再 main.yml文件写入

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...

生成main.yml文件文件后点击我的 settings 选项

3.创建个人访问令牌

右侧拉到底部选中 Developer settings

 

根据项目需求选择个人访问令牌，这里选择是 测试版Fine-grained tokens令牌

然后选中Generate toKen

创建 个人访问令牌

               1).toKen name 可以随便填写

               2).选择过期时间 Expiration 这里选择为下一年

               3). 存储库访问 Repository access 选择 仅选择存储库为当前创建库

 把权限第一个Repository permissions 全部改为可以访问

然后确定Generate token创建访问令牌

复制创建后的tokens

4.找到刚创建的储存库选择settings，找到Secrets and variables选择Actions，点击New repository secret创建秘密

 

 

添加之后会显示

 5.在vue项目 vue.config.js 加入

module.exports = {
  publicPath: '/my-repo/'
}

上传git仓库

 $ git add .
 $ git commit -m "job"
// git pull拉取
 $ git push

 在仓库点击设置下的page ，就可以看到自动部署后的链接