0. 目录

1. 前言

上一篇文档我们实现了一个简单的 Vue Playground。

2. 前置条件

本文默认您有下述前置条件：

Git 环境
GitHub 账户
能提交代码到 GitHub 上。

3. 构建网站

3.1 创建空 Vue Playground 仓库

3.2 修改仓库配置

需要修改仓库 page 构建的方式为 GitHub Actions。

3.3 建立本地项目与 GitHub 仓库链接。

注意: 下述命令中的[username] 需要替换成您个人的账户名称。

shell 复制代码

git init
git remote add origin https://github.com/[username]/vue-playground.git
git branch -M main

3.4 创建部署配置文件

根目录下创建 .github/workflows/deploy.yml。复制下面配置。

yml 复制代码

name: Deploy Vue Playground site to Pages

on:
  # 在针对 `main` 分支的推送上运行。如果你
  # 使用 `master` 分支作为默认分支，请将其更改为 `master`
  push:
    branches: [main]

  # 允许你从 Actions 选项卡手动运行此工作流程
  workflow_dispatch:

# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  # 构建工作
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
      # - uses: pnpm/action-setup@v3 # 如果使用 pnpm，请取消注释
      # - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm # 或 pnpm / yarn
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Install dependencies
        run: npm ci # 或 pnpm install / yarn install / bun install
      - name: Build
        run: npm run build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: dist

  # 部署工作
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

3.5 修改 `vite.config.js`配置。

GitHub Page 是纯静态页面，需要设置 base 为绝对路径。

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  // 注意： username 为您的个人用户名的全小写。
  base: "https://[username].github.io/vue-playground/",
  plugins: [vue()],
})

3.6 提交代码并触发 GitHub Action 构建