Vite下Vue和React项目build生成zip文件

Vue 和 React 都使用 vite-plugin-zip-pack 插件实现目的

1. 安装 vite-plugin-zip-pack

npm i -D vite-plugin-zip-pack

2. 在 vite.config.ts 添加代码

import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
import svgr from "vite-plugin-svgr";
import zipPack from "vite-plugin-zip-pack";
const apiRoutes = ["^/api/v1/", "/health"];

// Use environment variable to determine the target. 0.0.0.0:9860 192.168.10.55:7860
const target = process.env.VITE_PROXY_TARGET || "http://0.0.0.0:9860";

// Use environment variable to determine the UI server port
const port = process.env.VITE_PORT || 3000;

const proxyTargets = apiRoutes.reduce((proxyObj, route) => {
  proxyObj[route] = {
    target: target,
    changeOrigin: true,
    secure: false,
    ws: true,
  };
  return proxyObj;
}, {});
export default defineConfig(() => {
  return {
    build: {
      outDir: "build",
    },
    plugins: [
      react(),
      svgr(),
      zipPack({
        inDir: "build",
        outDir: "../frontend",
        outFileName: "build.zip",
      }),
    ],
    server: {
      port: Number(port),
      proxy: {
        ...proxyTargets,
      },
    },
  };
});

说明如下：

export interface Options {
    /**
     * Input Directory
     * @default `dist`
     */
    inDir?: string;
    /**
     * Output Directory
     * @default `dist-zip`
     */
    outDir?: string;
    /**
     * Zip Archive Name
     * @default `dist.zip`
     */
    outFileName?: string;
    /**
     * Path prefix for the files included in the zip file
     * @default ``
     */
    pathPrefix?: string;
    /**
     * Callback, which is executed after the zip file was created
     * err is only defined if the save function fails
     */
    done?: (err: Error | undefined) => void;
    /**
    * Filter function equivalent to Array.prototype.filter
    * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
    * is executed for every files and directories
    * files and directories are only included when return ist true.
    * All files are included when function is not defined
    */
    filter?: (fileName: string, filePath: string, isDirectory: boolean) => Boolean;
    /**
     * Enable logging
     * @default true
     */
    enableLogging?: boolean;
}