如何在Vite中配置独立的zip打包脚本？

方案1：利用环境变量控制vite-plugin-zip-file，实现独立归档触发 #

vite-plugin-zip-file默认在vite build完成后执行归档，我们可以通过环境变量控制插件是否启用，从而分离普通构建、构建+归档，以及单独归档已有build目录的场景。

步骤1：修改vite.config.js #

import { defineConfig } from 'vite'
import zipPack from 'vite-plugin-zip-file'

export default defineConfig(() => {
  // 通过环境变量判断是否开启归档
  const enableZip = process.env.VITE_ENABLE_ZIP === 'true'

  return {
    outDir: 'build',
    plugins: [
      // 仅当开启归档时加载插件
      ...(enableZip ? [zipPack()] : [])
    ]
  }
})

步骤2：配置package.json的scripts #

{
  "scripts": {
    "build": "vite build", // 普通构建，不生成zip
    "build:zip": "VITE_ENABLE_ZIP=true vite build", // 构建同时生成zip
    "zip": "VITE_ENABLE_ZIP=true vite build --emptyOutDir=false" // 单独归档已有build目录（不清理、不重新构建）
  }
}

说明：--emptyOutDir=false会让Vite跳过build目录清理和代码编译流程，仅触发插件的归档逻辑，快速完成已有build目录的打包。

方案2：使用独立压缩工具（纯离线归档） #

如果不想依赖Vite构建流程，直接用专门的文件压缩工具打包build目录，推荐轻量工具zip-a-folder：

步骤1：安装依赖 #

npm install zip-a-folder --save-dev

步骤2：创建归档脚本（项目根目录新建zip.js） #

const { zip } = require('zip-a-folder')

async function archiveBuild() {
  try {
    // 将build目录打包为build.zip，输出到项目根目录
    await zip('./build', './build.zip')
    console.log('Build目录归档完成')
  } catch (err) {
    console.error('归档失败:', err)
  }
}

archiveBuild()

步骤3：配置package.json的scripts #

{
  "scripts": {
    "build": "vite build",
    "zip": "node zip.js" // 直接执行脚本打包已有build目录
  }
}

内容的提问来源于stack exchange，提问作者Michael