526互联

使用Github Action在Github Pages上部署vue页面

发布时间 2023-09-11 11:59:58作者: 复制粘贴机器人

Github Action部分：

name: NodeJS

on:
  push:
    branches: [ "master" ]

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout ?️
        uses: actions/checkout@v3

      - name: Install and Build ? # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm install
          npm run build

      - name: Deploy ?
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: dist  # 打包生成的文件夹
          # branch: [自定义分支名，默认gh-pages]

大致流程

  1. master分支更新后，触发GitHub Action
  2. 打包
  3. 生成的文件会推送到 gh-pages 分支上

GitHub Settings部分：

GitHub Settings / Actions / General
image

GitHub Settings / Pages
image

注意事项：

由于生成的站点是 https://[name].github.io/[repository]，
所以打包生成的index.html中，引用为 /assets/xxxx.js 这种将会404。

// vite.config.ts 中设置
base: './',