使用 GitHub Actions 自动发布一个 Vue 应用到 GitHub Pages

准备工作

1. 本地 Vue CLI 创建一个 Vue 项目（vue-github-pages-demo）
2. Github 创建远程仓库
3. 建立连接，提交代码到 Github

个人设置

进入 Github 个人设置 settings，生成 Personal access tokens

Confirm password to continue（输入密码）。

设置 Note 标识（一般使用大写），这个标识不要忘记，Select scopes 不用勾选，直接创建 Genterate token。

记录生成的 token：

项目设置

进入项目的 settings，设置 Secrets：
(secrets 稍后会在项目目录下的工作流配置文件.github/workflows/***.yml中使用)

将 token 添加进去（记录一下 Name）：

本地项目

Github Actions 配置文件

在本地项目创建 Github Actions 的配置文件：workflow 工作流文件。

• Github 识别到配置文件后，会自动执行配置中的工作流。
  • 配置文件中可以通过 secrets 访问GitHub项目配置中的 Secrets 信息
• 配置文件存放在代码才能够库的 .github/workflows 目录。
• workflow 文件采用 YAML 格式，文件名可以任意取，但是后缀统一为 .yml。

Github Actions 官方文档

阮一峰 GitHub Actions 入门教程

参考别人写好的配置：Github 官方市场

这里参考 Deploy to GitHub Pages（注意当前是master分支，不是市场中提供的 latest 版本）。

创建 .github/workflows/ci.yml 文件，复制 example 示例代码，并进行调整。

# 工作流名称，不设置的话默认取配置文件名
name: Build and Deploy
# 指定触发 workflow 的条件
# 指定触发事件时，可以限定分支或标签
# 当前是 只有 master分支上触发 push 事件时才执行工作流任务
on: 
  push:
    branches:
      - master
# 工作流执行的一个或多个任务
jobs:
  # 任务名称
  build-and-deploy:
    # 任务运行的容器类型（虚拟机环境）
    runs-on: ubuntu-latest
    # 任务执行的步骤
    steps:
      # 步骤名称
      - name: Checkout 🛎️
        # 使用的操作 actions，可以使用公共仓库，本地仓库，别人的仓库的action
        # 拉取代码
        uses: actions/checkout@master

      - name: Build and Deploy
        # 构建发布 Github pages
        uses: JamesIves/github-pages-deploy-action@releases/v2
        # 该步骤所需的环境变量
        env:
          ACCESS_TOKEN: ${{ secrets.MY_TOKEN }}
          # 在部署前要checkout的基本分支，默认是master
          BASE_BRANCH: master # The branch the action should deploy from.
          # 指定部署的分支，默认是 gh-pages 分支
          BRANCH: gh-pages # The branch the action should deploy to.
          # 存储库中要部署的文件夹。
          # 该步骤会将项目中 FOLDER 指定文件夹下的文件推送到 BRANCH 分支，作为Github Pages 部署的内容。
          # Vue CLI默认打包到 dist 目录
          FOLDER: dist # The folder the action should deploy.
          # 在向 BRANCH 分支推送代码前，可以指定构建脚本
          BUILD_SCRIPT: npm install && npm run build # The build script the action should run prior to deploying.

package.json 配置 homepage

homepage 是该应用发布后的根目录：当 Github Pages 配置好后，用于访问的地址：

"homepage": "https://[用户名].github.io/[仓库名称]",

使用二级目录，并且二级目录为仓库名称的原因：

• 最后需要设置项目Settings中的GitHub Pages 的Source。
• 保存后它会生成访问地址，且地址格式就是上面 homepage中的样子，homepage只是遵循 GitHub Pages 的规则。

二级目录访问问题

• 当前配置，会在 master 分支有文件 push 推送时触发工作流任务
• 任务会在 ubuntu-latest 环境中执行
• 先将 BASE_BRANCH（master） 分支下的代码 checkout
• 然后运行构建脚本 BUILD_SCRIPT （npm install && npm run build）
• 然后将 FOLDER（dist）目录下的文件，全部 push 推送到 BRANCH（gh-pages）分支
• 最后在项目 Settings 中配置 Github Pages 的 Source 后，通过生成的地址访问。

但是访问地址是一个二级路径（/仓库名称）。

而打包后的文件 dist/index.html 中引用资源的路径是在根目录，此时会访问不到。

例如：

<link href=/css/app.47edb1b2.css rel=preload as=style>

解决办法：配置 vue ，指定打包后的资源访问路径

// vue.config.js
module.exports = {
  outputDir: 'dist',
  publicPath: process.env.NODE_ENV === 'production' ? '/仓库名称/' : '/'
}

打包后结果：

<link href=/仓库名称/css/app.47edb1b2.css rel=preload as=style>

提交代码 & 配置 GitHub Pages

提交代码后，GitHub 只要发现.github/workflows目录里面有.yml文件，就会自动运行该文件。

查看 Actions，及进度：

部署完成：

Github 会自动创建 gh-pages 分支（BRANCH指定的）。

在项目 Settings 中配置 GitHub Pages，指定创建的 gh-pages 分支。

保存后，会显示要访问的地址：