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的地址