使用 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：

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

本地项目

Github Actions 配置文件

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

• Github 识别到配置文件后，会自动执行配置中的工作流。
• 配置文件存放在代码才能够库的 .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/[e-mail]

      - name: Build and Deploy
        # 构建发布 Github pages
        uses: JamesIves/[e-mail]/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 分支。

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