Github Action
薛定谔see猫 2021/4/24 技能
本篇文章使用github action自动构建一个Vue3项目,并发布至github pages
# 1. 创建仓库
正常创建即可
# 2. 创建项目
vite
构建速度特别快,因此本项目使用vite
进行演示
初始化项目
npm init @vitejs/app demo -- --template vue
进入项目安装依赖
cd demo npm install
启动测试
npm run dev
访问测试
# 3. 更改vue3的打包路径
在vite.config.js
添加base
字段,base
的值为仓库的名称,如果要部署到[用户名].github.io
可以不写
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
base: "demo"
})
# 4. 更改打包命令
这步是可选的,仅对于项目中引入element-plus
的项目而言,因为如果引入element-plus
的话,默认的打包方式会报错
打开package.json
,修改build
命令
将
"build": "vue-tsc --noEmit && vite build"
更改为
"build": "vue-tsc --noEmit --skipLibCheck && vite build"
# 5. 代码提交
git init
git add .
git commit -m "init"
git branch -M main
git remote add origin https://github.com/用户名/demo.git
git push -u origin main
# 6. token
申请token
勾选
repo
即可复制token到
secrets
# 7. 编写action
在项目根目录下新建.github/workflows/ci.yml
# 工作流名称,不设置的话默认取配置文件名
name: Build and Deploy
# 指定触发 workflow 的条件
# 指定触发事件时,可以限定分支或标签
# 当前是 只有 main分支上触发 push 事件时才执行工作流任务
on:
push:
branches:
- main
# 工作流执行的一个或多个任务
jobs:
# 任务名称
build-and-deploy:
# 任务运行的容器类型(虚拟机环境)
runs-on: ubuntu-latest
# 任务执行的步骤
steps:
# 步骤名称
- name: Checkout 🛎️
# 使用的操作 actions,可以使用公共仓库,本地仓库,别人的仓库的action
# 拉取代码
uses: actions/checkout@v2.3.1
# 编译
- name: Build 🔧
run: npm install && npm run build
- name: Deploy 🚀
# 构建发布 Github pages
uses: JamesIves/github-pages-deploy-action@4.1.1
# 该步骤所需的环境变量
with:
branch: gh-pages
folder: dist
token: ${{ secrets.ACTION_TOKEN }}
# 8. 再次提交
git add .
git commit -m "action"
git push
查看部署状态
# 9. 访问测试
settings
中查看pages
的地址