github actions 部署个人Vue项目记录

首先说明gitpages放的静态页面，路由刷新会报404
项目准备工作：
在vue.config.js里边的publicPath改为 “/项目名/”

项目准备.png

1.点击个人头像，选择Settings

第一步.png

2.选择Developer settings

第二步.png

3.进入之后左侧选择personal access tokens

第三步.png

4.第四步 生成新的令牌，填写好令牌名，选择权限之后，即可看到生成的token

第四步.png

5.拿到token之后，一定要复制，然后返回git仓库，选择setting

第五步.png

6.选择Sercrets

第六步.png

7.选择New sercrets，将我们刚复制的token起个名字复制到这里保存

第七步.png

8.选择actions

第八步.png

9.git内置很多yml模板，不需要选择，点击

第九步.png

10.给yml文件写名字，并编写yml文件，此处仅做了vue的

第十步.png

name: buildAndDeploy
on:
  push
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 我们选择使用最新的ubuntu系统
    steps:
    - name: checkout
      uses: actions/checkout@master # 将代码拷贝到虚机中

    - name: buildAndDeploy
      uses: JamesIves/github-pages-deploy-action@master 
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 使用刚新建的secret
        BRANCH: gh-pages # 存放产物的分支名称
        FOLDER: dist # 存放build后产物的目录
        BUILD_SCRIPT: npm install && npm run build # 执行的命令

11.点击start commit ->commit new file

11.png

12.此时回到actions即可看到我们刚的yml文件正在执行
13.点击settings->options 下拉找到github page,选择yml文件内些的分支名
选中之后即可看到 Your site is published at ....

13.png

示例地址：https://wangxunahe1996.github.io/vue-openlayers/
git地址:https://github.com/wangxunahe1996/vue-openlayers