当前位置：首页 > news >正文

Vue3.0 + Vite项目实战：自动化生成dist资源包的zip压缩包

news 2026/6/7 22:51:17

1. 为什么需要自动化生成zip压缩包

在Vue3.0和Vite构建的项目中，每次完成打包后都会生成dist目录，里面包含了所有静态资源文件。但在实际部署时，我们经常需要将这些文件打包成zip格式上传到服务器或者分发给其他团队成员。手动操作不仅效率低下，还容易出错。想象一下，每次打包后都要手动打开压缩软件、选择文件、设置压缩选项，这个过程既枯燥又浪费时间。

自动化生成zip压缩包的好处显而易见。首先，它完全消除了人工操作环节，避免了遗漏文件或压缩参数设置错误的问题。其次，可以集成到CI/CD流程中，实现从代码提交到部署包生成的全自动化。我在实际项目中就遇到过因为手动压缩漏掉关键文件导致部署失败的案例，后来引入自动化方案后这类问题彻底消失。

从技术实现角度看，自动化压缩主要解决三个痛点：一是确保每次压缩包含完整的dist内容；二是可以灵活定制压缩包命名规则（比如包含版本号、构建时间等）；三是能够无缝对接现有构建流程。接下来我们就看看两种主流实现方案的具体操作。

2. 使用vite-plugin-zip-pack插件方案

2.1 插件安装与基础配置

vite-plugin-zip-pack是专门为Vite设计的压缩插件，使用起来非常简单。首先通过npm安装开发依赖：

npm i -D vite-plugin-zip-pack

然后在vite.config.ts中进行配置。这里有个小技巧：我建议根据不同的环境（development/staging/production）生成不同的压缩包名称，方便后续区分。配置示例如下：

import { defineConfig } from "vite"; import zipPack from "vite-plugin-zip-pack"; export default defineConfig(({ mode }) => ({ plugins: [ zipPack({ inDir: "dist", outFileName: `dist-${mode}-${new Date().getTime()}.zip`, outDir: "dist-zip" }) ], build: { outDir: "dist" } }));

这个配置有几个实用点值得注意：

inDir指定要压缩的目录，默认就是dist
outFileName支持动态命名，这里加入了构建模式和时间戳
outDir可以指定压缩包输出目录，避免和原始dist文件混在一起

2.2 高级配置与优化技巧

在实际使用中，我发现插件还支持更多实用参数。比如可以设置压缩级别、排除特定文件等。下面是一个更完整的配置示例：

zipPack({ inDir: "dist", outFileName: "bundle.zip", pathResolver: (filePath) => filePath.replace(/^dist\//, "assets/"), filter: (filePath) => !filePath.includes(".map"), level: 6 })

这里用到了几个关键参数：

pathResolver可以重写压缩包内文件路径，比如把所有文件移到assets目录下
filter用于排除sourcemap等不需要的文件
level控制压缩级别（1-9），数值越大压缩率越高但耗时越长

有个实际踩过的坑要注意：如果项目使用了动态路由，需要确保压缩包保留了原始目录结构。有次我配置错误导致路由文件路径变化，结果线上页面全部404。后来通过保留dist原始结构解决了问题。

3. 基于archiver的自定义脚本方案

3.1 基础环境搭建

虽然插件方案简单，但有时候我们需要更灵活的控制，这时就可以使用archiver库来自定义压缩流程。首先安装所需依赖：

npm i -D archiver fs-extra @types/archiver @types/fs-extra dayjs

这几个包各有用途：

archiver：核心压缩库
fs-extra：增强的文件系统操作
dayjs：处理时间格式化

新建一个buildZipPackage.ts脚本文件，基础结构如下：

import fs from 'fs-extra'; import archiver from 'archiver'; import path from 'path'; import dayjs from 'dayjs'; const buildZip = async () => { // 具体实现代码 }; buildZip().catch(console.error);

3.2 实现完整压缩逻辑

完整的脚本实现需要考虑多个细节：压缩进度显示、错误处理、文件命名规范等。下面是我在实际项目中打磨过的版本：

const OUTPUT_DIR = 'dist'; const PKG = require('../package.json'); const buildZip = async () => { console.log(`🚀 开始压缩 ${PKG.name} 项目...`); const timestamp = dayjs().format('YYYYMMDD-HHmm'); const zipName = `${PKG.name}-v${PKG.version}-${timestamp}.zip`; const outputPath = path.join(OUTPUT_DIR, zipName); // 确保dist目录存在 await fs.ensureDir(OUTPUT_DIR); const output = fs.createWriteStream(outputPath); const archive = archiver('zip', { zlib: { level: 9 } // 最高压缩级别 }); // 进度监听 output.on('progress', ({ processed }) => { console.log(`📦 已处理 ${processed} 个文件...`); }); // 完成回调 output.on('close', () => { const size = (archive.pointer() / 1024 / 1024).toFixed(2); console.log(`✅ 压缩完成！总大小: ${size} MB`); console.log(`📁 压缩包位置: ${outputPath}`); }); // 错误处理 archive.on('error', (err) => { throw new Error(`压缩失败: ${err.message}`); }); archive.pipe(output); archive.directory(OUTPUT_DIR, false); await archive.finalize(); };

这个脚本有几个亮点：

自动读取package.json中的项目信息
在压缩包名称中加入版本号和精确到分钟的时间戳
实时显示压缩进度
详细的完成统计和错误处理

3.3 集成到项目工作流

为了让脚本更方便使用，可以在package.json中添加快捷命令：

{ "scripts": { "build": "vite build", "build:zip": "vite build && ts-node ./scripts/buildZipPackage.ts", "zip": "ts-node ./scripts/buildZipPackage.ts" } }

这样开发人员可以：

运行npm run build:zip一次性完成构建和压缩
单独运行npm run zip只进行压缩操作

在CI/CD环境中，还可以添加更多逻辑，比如压缩完成后自动上传到服务器，或者通过webhook通知相关人员。我在团队内部就实现了一个自动将压缩包发布到内网存储的服务，大大简化了测试人员的获取流程。

4. 两种方案的对比与选型建议

4.1 功能对比

通过实际项目验证，我整理了两个方案的主要差异：

特性	vite-plugin-zip-pack	archiver脚本
配置复杂度	简单	中等
灵活性	一般	极高
压缩包命名控制	基础	完全自定义
目录结构控制	有限	完全控制
进度反馈	无	可自定义实现
额外依赖	无	需要多个包
与构建流程集成度	深度集成	需要手动调用