概念
CI：持续集成，开发人员频繁合并将代码变更合并到主干，每次合并触发自动化构建和测试流程
CD：持续交付和部署，持续交付保证代码可以随时安全部署到生产环境，后者自动将变更部署到生产环境
准备工作
初始化项目，安装eslint代码检查
npm i eslint --save-dev
npm i eslint -D
--save-dev简写为-D，意思为仅开发构建时需要的包，上线后不需要
初始化eslint检查规则
需要eslint检查并找到代码不规范的问题
在package.json中配置eslint命令，后续CI/CD流会执行命令检查代码
这些后缀的文件需要检查，--fix自动修复错误
创建github或gitlab远程仓库
接下来是Github actions操作步骤：
在本地文件夹创建.github文件夹，进入文件夹，创建workflows文件夹，GitHub Actions 会自动识别项目根目录下 .github/workflows/ 文件夹中的 YAML 文件（后缀.yml/.yaml），创建工作流文件，可以自定义命名，后缀必须是yml
文件内容
# 工作流名称，GitHub页面会显示这个名字，自定义即可
name: Frontend CI/CD Workflow
# 触发条件：哪些操作会启动这个CI/CD工作流
on:
# 1. 推送到main分支时触发（GitHub默认主分支，老版本是master，改这里要和自己的分支一致）
push:
branches: [ main ]
# 2. 手动在GitHub页面触发（可选，方便测试，不用每次都提交代码）
workflow_dispatch:
# 工作流的执行任务，一个jobs可以包含多个step（步骤）
jobs:
# 任务名称：构建和部署（自定义）
build-and-deploy:
# 运行的服务器环境：GitHub提供的Ubuntu最新版（企业常用Linux，Windows/macOS可换，见注释）
runs-on: ubuntu-latest
# 任务的具体步骤，按顺序执行，一步失败则整个工作流终止
steps:
# 步骤1：拉取GitHub仓库中的代码到CI服务器（官方action，直接用）
- name: Checkout code
uses: actions/checkout@v4
# 步骤2：安装Node.js环境（官方action，指定LTS版本，和本地一致）
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: 20 # 选Node.js LTS版本，比如18/20，本地node -v看自己的版本
cache: 'npm' # 缓存npm依赖，提升下次CI速度（核心优化，企业必加）
# 步骤3：安装项目依赖（和本地执行npm install一样）
- name: Install dependencies
run: npm install # 若用yarn/pnpm，改这里为yarn install / pnpm install
# 步骤4：CI核心-执行ESLint代码检查（前面配置的npm run lint）
- name: Lint code with ESLint
run: npm run lint # 有语法/规范错误则直接失败，终止后续步骤
# 步骤5：CI核心-构建前端项目（生成静态dist目录）
- name: Build project
run: npm run build # Vite/Vue-CLI/Create-React-App都是这个命令，生成dist目录
# 步骤6：CD核心-将构建后的dist目录部署到GitHub Pages（官方+社区成熟action，直接用）
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v4 # 稳定的部署action，企业常用
with:
# 部署的源文件目录：项目构建后的dist目录（固定，和本地build结果一致）
publish_dir: ./dist
# 自动生成的Git提交信息，自定义即可
commit_message: 'ci: auto deploy [skip ci]'
# 部署的密钥：GitHub自动生成的TOKEN，无需手动填，后续配置权限会自动注入
github_token: ${{ secrets.GITHUB_TOKEN }}
将新增的工作流文件推送到远程仓库
配置GitHub pages
CD操作将构建后的dist文件部署到GitHub Pages，配置完成后将生成公共访问地址https://你的用户名.github.io/仓库名/
设置从分支构建，设置分支为gh-pages目录为root(第一次可能会没有这个分支，可以先设置为main，触发CI/CD工作流后创建这个分支再回来修改，不过一定要记得修改)，否则可能会找不到文件
触发CI/CD流
由于设置的CI/CD流的触发方式是推送代码，因此直接推送代码就能触发，如果失败检查失败原因，重新运行
可能出现的问题
需要在GitHub打开工作流可写权限
添加资源的base路径
