Vite 插件推荐：vite-plugin-zip-pack

npm: www.npmjs.com/package/vit…

功能

• 可以将目录打包成 zip 的 vite 插件

适用场景

SPA 应用，代码区分多套环境（开发、测试、生产...），每次部署都需要打包成 zip 上传到服务器

练习

1. 配置 build 属性，将打包后到目录结构修改为

   dist
    ├── development
    └── test
    └── {其他环境}
   

2. 将不同环境的后的代码压缩成 zip 并放置在根目录下的 dist-zip 目录下

安装

npm i -D vite-plugin-zip-pack

使用

// vite.config.ts
import { defineConfig } from "vite";
import zipPack, { Options as ZipPickOptions } from "vite-plugin-zip-pack";

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
    // mode => vite 提供的用于区分环境的变量，可以通过在 script 命令中修改 --mode [模式名] 设置
    // command => vite 提供的用于区分命令的变量，值为: 'build' | 'server'
    
    const zipPickOptions: ZipPickOptions = {
        inDir: `dist/${mode}`,
        outFileName: `dist-${mode}.zip`
    }
    
    return {
        plugins: [zipPack(zipPickOptions)],
        build: {
          outDir: `dist/${mode}/website`
        },
        // 其他代码...
    }
})