首先说明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
