注:(此创建流程须在网络代理状态下操作)
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就可以查看啦