GitHub Actions 就是托管在 GitHub 上的自动化脚本引擎。 它帮你把“代码提交 → 测试 → 打包 → 部署”这一整套 DevOps 流水线，用一段 YAML 配置写到仓库里，GitHub 负责按事件触发、在云端免费跑。
核心概念
把 GitHub Actions 里经常出现的名词按“一栋自动化工厂”来类比，更能理解它们之间的层级关系：
| 工厂概念 | GitHub Actions 术语 | 作用一句话 |
|---|---|---|
| 整家工厂 | Workflow（工作流） | 描述“何时触发 + 全流程做什么”的 YAML 文件（.github/workflows/ci.yml ）。 |
| 一条生产线 | Job（任务） | 在同一 Runner 里顺序/并行执行的一组步骤；一个 Workflow 可以有多个 Job。 |
| 工位 | Step（步骤） | Job 里的最小执行单元；要么 run 一段命令，要么 uses 一个现成的 Action。 |
| 标准机械臂 | Action（动作） | 可复用的脚本或容器，由官方或社区提供（例如 actions/checkout@v4 ）。 |
| 车间+机器 | Runner（执行器） | 真正跑脚本的环境：GitHub 托管的 Ubuntu/Win/macOS，或你自建的机器。 |
| 启动按钮/传感器 | Event（事件） | 触发 Workflow 的信号：push、pull_request、schedule、cron 等 30+ 种。 |
| 仓库/料箱 | Artifact（构件） | Job 产生的文件（测试报告、可执行包、镜像等），可跨 Job 下载或长期保存。 |
| 暗号/钥匙串 | Secret（机密） | 存放密码、Token、证书，供 Workflow 以 ${{ secrets.XXX }} 引用，不会泄露日志。 |
| 传声筒 | Context（上下文） | 运行时环境变量集合（github , env , matrix , inputs 等），用 ${{ }} 语法随处插值。 |
| 多型号批量生产 | Matrix（矩阵） | 让一个 Job 在多个语言版本 / 操作系统上并行跑，省重复 YAML。 |
“当 Event 触发 Workflow 后，GitHub 分配 Runner 执行 Job，每个 Job 由若干 Step 组成，Step 可以 run 脚本或 uses Action，产出 Artifact，过程中用 Secret 和 Context 传值，Matrix 让一批 Job 并行跑。”
应用
部署vue3项目到github page
确保代码仓是公开的，并且开启了github pages(选择github actions方式)
新建vue3项目，这里我是一个repository仓包含很多个文件夹项目，这里我们只关系 github-actions-deploy-vue3-to-github-page这个目录项目。
首先确保本地能正常启动：
调整部署目录
因为最终想要的效果是访问 url：https://<用户名>.github.io/project-demos/github-actions-deploy-vue3-to-github-page 对应项目的主页，所以这里需要代码适配一下：
调整路径：
1、配置文件添加 base: '/project-demos/github-actions-deploy-vue3-to-github-page/'，表示会去这个路径下找资源文件。
2、路由修改：history: createWebHistory('/project-demos/github-actions-deploy-vue3-to-github-page/')，整个单页应用被部署在 /project-demos/github-actions-deploy-vue3-to-github-page/ 这个子目录下，请把路由的基准路径设成它。
创建工作流
然后创建工作流 .github/workflow/github-actions-deploy-vue3-to-github-page.yml
name: Deploy github-actions-deploy-vue3-to-github-page to GitHub Pages
on:
push:
branches: [master]
# 仅当 github-actions-deploy-vue3-to-github-page 目录有改动才触发，如果整个repository表示一个项目，这行可以不写
paths: ["github-actions-deploy-vue3-to-github-page/**"]
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
# 1 拉取代码到环境中
- uses: actions/checkout@v4
# 2 装 pnpm
- uses: pnpm/action-setup@v4 # 官方动作，快速装 pnpm
with:
version: 10 # 或锁定你项目里的版本
# 3 装 Node 并缓存 pnpm store
- uses: actions/setup-node@v4
with:
node-version: 20
cache: 'pnpm'
cache-dependency-path: github-actions-deploy-vue3-to-github-page/pnpm-lock.yaml
# 4 安装 & 构建
- name: Install & Build
working-directory: github-actions-deploy-vue3-to-github-page # 进入子目录
run: |
pnpm install --frozen-lockfile # 等价于 npm ci
pnpm build
# 5 调试，打印日志，实际使用去掉
- name: Debug dist
run: |
echo "=== after build ==="
ls -la ./github-actions-deploy-vue3-to-github-page
ls -la ./github-actions-deploy-vue3-to-github-page/dist || echo "❌ dist still missing"
# 6 这里是将dist目录下的资源放在 deploy/github-actions-deploy-vue3-to-github-page 目录下，
# 这样部署deploy目录，就能通过github-actions-deploy-vue3-to-github-page目录访问里面的资源，
# 这样就和url设定保持一致，如果是整个repository就表示一个项目，则不需要这样做
- name: 创建子目录层级
run: |
mkdir -p deploy/github-actions-deploy-vue3-to-github-page
cp -r github-actions-deploy-vue3-to-github-page/dist/* \
deploy/github-actions-deploy-vue3-to-github-page/
# 7 将deploy目录下的资源打包上传(github-actions-deploy-vue3-to-github-pag/**)
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./deploy # 产物目录
# 部署打包的资源
- name: Deploy to GitHub Pages
uses: actions/deploy-pages@v4
当push代码的时候，则会自动跑actions，自动部署：
