【实战教程】Vue3+Vite4项目自动化打包部署，一键生成Zip并发布到GitHub！

pai_89
59 阅读3分钟

在当前项目遇到个问题，没有CI/CD CLI帮助构建打包，需要手动提交zip包，代码可以提交到GitHub上，于是就想到用GitHub Actions 来实现，之后还可以增加GitHub page，打包完之后可以直接查看。

GitHub Actions打包的时间比公司的破电脑打包还快

image.png

image.png

📦 准备工作

确保你的项目满足以下条件：

  1. 使用 Vue3 + Vite4
  2. 代码托管在 GitHub
  3. 已有基本的打包脚本

🚀 四步实现自动化

第一步：创建GitHub Actions工作流文件

在项目根目录创建 .github/workflows/build-and-release.yml：

name: Auto Build and Release

on:
  push:
    tags:
      - 'v*'  # 监听v开头的标签，如v1.0.0
  workflow_dispatch:  # 允许手动触发

jobs:
  build-and-release:
    runs-on: ubuntu-latest
    permissions:
      contents: write  # 关键权限：允许创建Release

    steps:
    # 1. 拉取代码
    - name: Checkout code
      uses: actions/checkout@v4

    # 2. 设置Node环境
    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '18'
        cache: 'npm'

    # 3. 安装依赖
    - name: Install dependencies
      run: npm ci

    # 4. 打包构建
    - name: Build project
      run: npm run build

    # 5. 生成Zip包
    - name: Create zip package
      run: |
        cd dist
        zip -r ../${{ github.event.repository.name }}-${{ github.ref_name }}.zip ./*
        echo "Zip包创建成功！"

    # 6. 创建GitHub Release
    - name: Create GitHub Release
      uses: softprops/action-gh-release@v1
      with:
        files: ${{ github.event.repository.name }}-${{ github.ref_name }}.zip
        tag_name: ${{ github.ref_name }}
        name: Release ${{ github.ref_name }}
        body: |
          自动化构建版本：${{ github.ref_name }}
          构建时间：${{ github.event.created_at }}
          构建编号：#${{ github.run_number }}
        token: ${{ secrets.GITHUB_TOKEN }}

第二步：配置Package.json脚本（可选但推荐）

在 package.json 中添加便捷脚本：

{
  "scripts": {
    "build": "vite build",
    "build:zip": "npm run build && cd dist && zip -r ../dist.zip ./*",
    "build:zip-with-version": "npm run build && cd dist && zip -r ../dist-$(node -p \"require('./package.json').version\").zip ./*",
    "build:zip-with-date": "npm run build && cd dist && zip -r ../dist-$(date +%Y%m%d-%H%M%S).zip ./*",
    "release": "npm run build:zip-with-version && gh release create v$(node -p \"require('./package.json').version\") dist-*.zip --generate-notes"
  }
}

第三步：推送标签触发自动化

# 1. 创建并推送标签
git tag v1.0.0
git push origin v1.0.0

# 2. 等待约1分钟，GitHub Actions自动运行
# 3. 查看结果：仓库 → Releases → 下载Zip包

第四步：手动触发（可选）

如果需要立即构建，无需创建标签：

  1. 进入GitHub仓库 → Actions
  2. 选择 "Auto Build and Release" 工作流
  3. 点击 "Run workflow" → 选择分支 → 运行

💡 核心原理说明

自动触发机制

  • push.tags: ['v*']：监听v开头的标签推送
  • workflow_dispatch：支持手动触发

动态文件名

  • ${{ github.event.repository.name }}：自动获取仓库名
  • ${{ github.ref_name }}：自动获取标签名（如v1.0.0）

权限配置

permissions:
  contents: write  # 关键：允许创建Release

🛠 常见问题解决

问题1：403权限错误

解决方案：确保添加了token参数

with:
  token: ${{ secrets.GITHUB_TOKEN }}  # 必须添加

问题2：标签已存在

解决方案：先删除旧标签

- name: Clean existing tag
  run: |
    git push --delete origin ${{ github.ref_name }} || true
  env:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

问题3：Zip文件找不到

解决方案：添加文件检查

- name: Verify zip file
  run: |
    if [ ! -f "*.zip" ]; then
      echo "错误：Zip文件未找到！"
      exit 1
    fi

🌟 高级功能扩展

支持多包管理器

对于 Yarn 用户：

name: Build with Yarn

steps:
- name: Install dependencies (Yarn)
  run: yarn install --frozen-lockfile

- name: Build project
  run: yarn build

对于 pnpm 用户：

name: Build with pnpm

steps:
- name: Install pnpm
  uses: pnpm/action-setup@v2

- name: Install dependencies (pnpm)
  run: pnpm install --frozen-lockfile

- name: Build project
  run: pnpm build

添加环境区分

- name: Build with environment
  run: |
    if [[ "${{ github.ref_name }}" == *"beta"* ]]; then
      npm run build:staging
    else
      npm run build:production
    fi

使用 Vite 插件自动打包

安装 zip 打包插件：

npm install vite-plugin-zip-pack --save-dev

配置 vite.config.js：

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

export default defineConfig({
  plugins: [
    vue(),
    zipPack({
      inDir: 'dist',
      outDir: 'release-zip',
      outFileName: `app-${process.env.npm_package_version}.zip`
    })
  ]
})

添加安全校验

- name: Security check
  run: |
    npm audit --audit-level moderate
    # 或者使用snyk等安全扫描

📊 查看构建结果

构建完成后，你可以在以下位置找到Zip包：

1. GitHub Releases

  • 访问你的仓库 → Releases
  • 选择对应的版本标签
  • 在 Assets 部分下载 Zip 包

2. Actions 产物

  • 访问仓库 → Actions
  • 选择最近的工作流运行
  • 在 Artifacts 区域下载构建产物

3. 邮件通知

  • GitHub 会自动发送构建结果通知邮件

🔧 手动触发工作流详解

通过 GitHub 界面触发：

  1. 进入仓库 → Actions
  2. 选择对应的工作流
  3. 点击 "Run workflow"
  4. 选择分支（可选填写参数）
  5. 点击绿色运行按钮

image.png

通过 GitHub CLI 触发：

# 安装 GitHub CLI
brew install gh  # macOS
# 或其他系统安装方式

# 登录认证
gh auth login

# 手动触发工作流
gh workflow run "Auto Build and Release" --ref main

# 查看运行状态
gh run list --workflow="Auto Build and Release"
avatar
文章
阅读
粉丝