Vite项目打包生成dist.zip方法

### **使用自定义插件（推荐）**

#### **步骤1：安装依赖**

bash

复制

```
npm install jszip -D
```

#### **步骤2：创建插件文件**

在项目根目录新建`zip.js`（或`createZip.ts`，若使用TypeScript），写入以下代码：

javascript

复制

```
const path = require('path');
const fs = require('fs');
const JSZip = require('jszip');

const plugin = (fileName = 'dist', outputPath) => {
const output = outputPath || path.resolve(__dirname, './dist');
fileName += '.zip';

const makeZip = () => {
const zip = new JSZip();
const distPath = path.resolve(output);

// 递归读取文件夹并添加到Zip
const readDir = (zipInstance, dirPath) => {
const files = fs.readdirSync(dirPath);
files.forEach(file => {
const filePath = path.join(dirPath, file);
const stats = fs.statSync(filePath);
if (stats.isDirectory()) {
const folder = zipInstance.folder(file);
readDir(folder, filePath);
} else {
zipInstance.file(file, fs.readFileSync(filePath));
}
});
};

// 删除已存在的Zip文件
const removeExistingZip = () => {
const zipPath = path.join(distPath, '../', fileName);
if (fs.existsSync(zipPath)) fs.unlinkSync(zipPath);
};

// 生成Zip内容并写入文件
readDir(zip, distPath);
zip.generateAsync({
type: 'nodebuffer',
compression: 'DEFLATE',
compressionOptions: { level: 9 }
}).then(content => {
const destPath = path.join(distPath, '../', fileName);
removeExistingZip();
fs.writeFileSync(destPath, content);
});
};

return {
name: 'vite-plugin-auto-zip',
apply: 'build',
closeBundle: makeZip
};
};

module.exports = plugin;
```

#### **步骤3：在Vite配置中引入插件**

修改`vite.config.js`（或`vite.config.ts`）：

javascript

复制

```
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import zipPlugin from './zip';

export default defineConfig({
plugins: [
vue(),
zipPlugin() // 可传参自定义文件名，如 zipPlugin('myapp', './custom-dist')
],
build: {
outDir: 'dist', // 可选：修改输出目录名:cite[3]:cite[8]
}
});
```

#### **步骤4：执行打包**

bash

复制

```
npm run build
```

如果只想在**开发环境**（`development`）下启用 ZIP 打包功能，而在**生产环境**（`production`）下禁用，可以修改 Vite 插件逻辑，使其仅在 `vite dev` 或 `vite build --mode development` 时生效。以下是具体实现方法：

* * *

### **方法 1：基于 `mode` 动态启用插件**

#### **1. 修改插件逻辑（`createZip.js`）**

javascript

复制

```
import path from 'path';
import fs from 'fs';
import JSZip from 'jszip';

export default function createZipPlugin(options = {}) {
const {
fileName = 'dist',
outputPath,
enabled = process.env.NODE_ENV === 'development' // 默认开发环境启用
} = options;

if (!enabled) {
// 如果禁用，返回一个空插件
return {
name: 'vite-plugin-auto-zip',
apply: 'build',
closeBundle: () => {} // 空函数
};
}

const output = outputPath || path.resolve(process.cwd(), './dist');
const zipFileName = `${fileName}.zip`;

const makeZip = () => {
const zip = new JSZip();
const distPath = path.resolve(output);

// 递归读取文件夹
const readDir = (zipInstance, dirPath) => {
const files = fs.readdirSync(dirPath);
files.forEach(file => {
const filePath = path.join(dirPath, file);
const stats = fs.statSync(filePath);
if (stats.isDirectory()) {
const folder = zipInstance.folder(file);
readDir(folder, filePath);
} else {
zipInstance.file(file, fs.readFileSync(filePath));
}
});
};

// 生成 ZIP
readDir(zip, distPath);
zip.generateAsync({
type: 'nodebuffer',
compression: 'DEFLATE',
compressionOptions: { level: 9 }
}).then(content => {
const destPath = path.join(distPath, '../', zipFileName);
if (fs.existsSync(destPath)) fs.unlinkSync(destPath);
fs.writeFileSync(destPath, content);
});
};

return {
name: 'vite-plugin-auto-zip',
apply: 'build',
closeBundle: makeZip
};
}
```

#### **2. 在 `vite.config.js` 中动态配置**

javascript

复制

```
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import createZipPlugin from './createZip';

export default defineConfig(({ mode }) => ({
plugins: [
vue(),
createZipPlugin({
enabled: mode === 'development' // 仅开发模式启用
})
],
build: {
outDir: 'dist'
}
}));
```