vue3.0 + vite打包完成后，将dist下的资源包打包成zip的两种方法

vue3.0 + vite打包完成之后，自动将dist下的资源包打包成zip

1、vite-plugin-zip-pack 插件

安装插件

bash 复制代码

npm i -D vite-plugin-zip-pack

修改vite.config.ts，增加plugin

ts 复制代码

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

export default defineConfig(({ mode, command }) => {
    // mode => vite 提供的用于区分环境的变量，可以通过在 script 命令中修改 --mode [模式名] 设置
    // command => vite 提供的用于区分命令的变量，值为: 'build' | 'serve'
    
    const zipPickOptions: ZipPickOptions = {
        inDir: `dist`, // 生成的web包根目录
        outFileName: `dist-${mode}.zip` // 生成zip的名称，可自定义
    }
    
    return {
        plugins: [zipPack(zipPickOptions)],
        build: {
          outDir: 'dist'
        },
    }
})

2、执行生成app_config.js脚本之后打包

bash 复制代码

# 安装依赖环境
npm i -D @types/archiver
npm i -D archiver
npm i -D @types/fs-extra
npm i -D fs-extra
npm i -D dayjs

bash 复制代码

import fs from 'fs-extra';
import archiver from 'archiver';
import pkg from '../../package.json';
import dayjs from 'dayjs';

/**
 * 获取用户根目录
 * @param dir file path
 */
export function getRootPath(...dir: string[]) {
  return path.resolve(process.cwd(), ...dir);
}

/**
 * 将dist目录下的文件构建成zip包，并移动到dist下;
 */
export const buildZipPackage = async () => {
  const OUTPUT_DIR = 'dist';
  console.log(`✨ [${pkg.name}]` + ' - 文件打包开始...');
  // 设置输出ZIP文件的路径和文件名
  const filePath = `${OUTPUT_DIR}/`;
  const fileName = `${pkg.name}-${pkg.version}-${dayjs().format('YYYYMMDDHH')}.zip`;
  const outputFilePath = getRootPath(fileName);

  // 创建文件输出流
  const output = fs.createWriteStream(outputFilePath);
  const archive = archiver('zip', {
    zlib: { level: 9 }, // 压缩级别
  });

  // 监听输出流关闭事件
  output.on('close', function () {
    const size = 1024;
    const fileSize = archive.pointer();
    let prinfSize = fileSize.toFixed(1);
    let unit = 'B';
    if (fileSize > size * size) {
      unit = 'M';
      prinfSize = (fileSize / (size * size)).toFixed(1);
    } else if (fileSize > size) {
      unit = 'K';
      prinfSize = (fileSize / size).toFixed(1);
    }
    console.log(`✨ [${fileName}] - 构建成功,总大小: ${prinfSize} ${unit}!`);

    const destinationPath = getRootPath(`dist/${fileName}`);
    // 移动文件
    fs.rename(outputFilePath, destinationPath, (err) => {
      if (err) throw err;
      console.log(`✨ [${fileName}] - 文件已被移动到:`, [OUTPUT_DIR]);
    });
    console.log(`✨ [${pkg.name}]` + ' - 文件打包完成.');
  });

  // 监听压缩过程中的警告
  archive.on('warning', function (err) {
    if (err.code === 'ENOENT') {
      // log warning
    } else {
      // 抛出错误
      throw err;
    }
  });

  // 监听压缩过程中的错误
  archive.on('error', function (err) {
    throw err;
  });

  // 将输出流与存档关联起来
  archive.pipe(output);

  // 添加dist目录下的所有文件到压缩包
  archive.directory(getRootPath(filePath), false);

  // 完成压缩
  archive.finalize();
};

buildZipPackage();

测试：

bash 复制代码

# 测试命令行
yarn esno ./buildZipPackage.ts

# 执行结果如下：
✨ [gx-portal] - 文件打包开始...
✨ [gx-portal-2.0.0-2024102322.zip] - 构建成功,总大小: 5.0 M!
✨ [gx-portal] - 文件打包完成.
✨ [gx-portal-2.0.0-2024102322.zip] - 文件已被移动到: [ 'dist' ]