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

vue3.0 + vite打包完成之后,自动将dist下的资源包打包成zip
1、vite-plugin-zip-pack 插件
安装插件

npm i -D vite-plugin-zip-pack

修改vite.config.ts,增加plugin

// 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脚本之后打包

# 安装依赖环境
npm i -D @types/archiver
npm i -D archiver
npm i -D @types/fs-extra
npm i -D fs-extra
npm i -D dayjs
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();

测试:

# 测试命令行
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' ]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/57856.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot入门学习笔记

在我们创建了一个Springboot项目之后,我们会看到有很多文件夹和文件 Springboot程序中各类文件的意义 一.pom.xml 在 Spring Boot 项目中,pom.xml(Project Object Model)文件是 Maven 构建工具的核心配置文件。起到项目信息定义…

OpenCV中的图像通道合并

在计算机视觉和图像处理领域,OpenCV是一个强大的工具库,它提供了从基本操作到复杂算法的广泛功能。今天,我们将通过一个简单的示例来探索OpenCV中的图像通道处理,特别是如何操作和理解BGR与RGB颜色空间的差异。 Lena图像&#xf…

四,Linux基础环境搭建(CentOS7)- 安装Zookeeper

Linux基础环境搭建(CentOS7)-安装Zookeeper 大家注意以下的环境搭建版本号,如果版本不匹配有可能出现问题! 一、Zookeeper下载及安装 ZooKeeper是一个开源的分布式协调服务,由雅虎创建,是Google Chubby的…

51单片机记录

电平特性 (本课程中)定义单片机为TTL电平 高5V 低 0V RS232电平:计算机串口 高-12V 低12V ※掌握二进制转16进制 二进制数的逻辑运算 “与”运算是实现“必须都有,否则就没有”运算符“”—“&”有0则0 例:000;01100;111 规律…

解决 IntelliJ IDEA 中 Tomcat 日志乱码问题的详细指南

目录 前言1. 分析问题原因2. 解决方案2.1 修改 IntelliJ IDEA 的 JVM 选项2.2 配置 Tomcat 实例的 VM 选项2.2.1 设置 Tomcat 的 VM 选项2.2.2 添加环境变量 3. 进一步优化3.1 修改 Tomcat 的 logging.properties3.2 修改操作系统默认编码3.2.1 Windows 系统3.2.2 Linux 和 mac…

2024mathorcup大数据竞赛B题【电商品类货量预测及品类分仓规划】思路详解

问题 1:建立货量预测模型,对该仓储网络 350 个品类未来 3 个月(7-9月)每个月的库存量及销量进行预测,其中库存量根据历史每月数据预测月均库存量即可,填写表 1 的预测结果并放在正文中,并将完整…

强化学习数学原理学习(一)

前言 总之开始学! 正文 先从一些concept开始吧,有一个脉络比较好 state 首先是就是状态和状态空间,显而易见,不多说了 action 同理,动作和动作空间 state transition 状态转换,不多说 policy 策略,不多说 reward 奖励,不多说 MDP(马尔科夫) 这里需要注意到就是这个是无…

了解 - 微格式

微格式 微格式(microformat)是一种用于在 HTML 中嵌入语义和结构化数据的标准,它为社交网络应用程序、搜索引擎、聚合器和其他工具提供了一个 API。这些最小的 HTML 模式用于标记从基本到特定领域的信息实体,例如人物、组织、事件…

Java-图书管理系统

我的个人主页 欢迎来到我的Java图书管理系统,接下来让我们一同探索如何书写图书管理系统吧! 1管理端和用户端 2建立相关的三个包(book、operation、user) 3建立程序入口Main类 4程序运行 1.首先图书馆管理系统分为管理员端和…

Redis 集群 问题

前言 相关系列 《Redis & 目录》(持续更新)《Redis & 集群 & 源码》(学习过程/多有漏误/仅作参考/不再更新)《Redis & 集群 & 总结》(学习总结/最新最准/持续更新)《Redis & 集群…

MySQL 安装及用户管理

MySQL 安装及用户管理 MySQL 是一款广泛使用的开源关系数据库管理系统,适用于各种应用程序和平台。本文将提供在不同操作系统(Windows、macOS 和 Linux)上安装 MySQL 的详细步骤,并介绍如何创建 MySQL 用户及设置密码。 1. Wind…

通过Docker Compose构建自己的Java项目

通过Docker Compose构建自己的Java项目 前置条件 安装了Docker,未安装的请移步:CentOS7 / CentOS8 安装 Docker-ce安装了Docker-Compose,未安装的请移步:在CentOS7、CentOS8系统下安装Docker Compose1. 配置阿里云镜像仓库 为了提高Docker镜像的下载速度,我们可以配置阿…

【Git 】Windows 系统下 Git 文件名大小写不敏感

背景 在 Windows 系统上,Git 对文件名大小写的不敏感性问题确实存在。由于 Windows 文件系统(如 NTFS )在默认情况下不区分文件名大小写所导致的。 原因分析 文件系统差异 Windows文件系统(如 NTFS)默认不区分文件名…

代码随想录算法训练营第46期Day42

leetcode.518.零钱兑换 class Solution { public: //求装满背包有几种方法,公式都是:dp[j] dp[j - nums[i]]; // 如果求组合数就是外层for循环遍历物品,内层for遍历背包。 // 如果求排列数就是外层for遍历背包,内层for循环遍历物…

Detecting Holes in Point Set Surfaces 论文阅读

下载链接 Detecting Holes in Point Set Surfaces 摘要 3D 数据采集过程(例如激光范围扫描)产生的重要物体模型通常包含由于遮挡、反射或透明度而产生的孔洞。本文的目标就是在点集表面上检测存在的孔洞。对于每个点,将多个标准组合成一个综…

【机器学习】股票数据爬取与展示分析

数据爬取 一、爬取原理二、代码实践2.1 股票列表获取2.1.1 确定待爬取网页2.1.2 向网页发送请求获取页面响应2.1.3 文本转换成JSON2.1.4 将数据保存到csv文件中2.2 股票数据获取 三、结果分析 一、爬取原理 本文中主要使用的就是Python的request库,这个库基于HTTP请…

GPT打数模——电商品类货量预测及品类分仓规划

背景 电商企业在各区域的商品存储主要由多个仓库组成的仓群承担。其中存储的商品主要按照属性(品类、件型等)进行划分和打标,便于进行库存管理。图 1 是一个简化的示意图,商品品类各异,件数众多,必须将这些…

Task :prepareKotlinBuildScriptModel UP-TO-DATE,编译卡在这里不动或报错

这里写自定义目录标题 原因方案其他思路 原因 一般来说,当编译到这个task之后,后续是要进行一些资源的下载的,如果你卡在这边不动的话,很有可能就是你的IDE目前没有办法进行下载。 方案 开关一下IDE内部的代理,或者…

Jetpack架构组件_LiveData组件

1.LiveData初识 LiveData:ViewModel管理要展示的数据(VM层类似于原MVP中的P层),处理业务逻辑,比如调用服务器的登陆接口业务。通过LiveData观察者模式,只要数据的值发生了改变,就会自动通知VIEW层&#xf…

C#里使用最高性的网络通讯例子

由于接收网络数据会不完整的包, 并且产生各种问题,导致大家都是使用最低效的内存保存数据,比如List<byte>这样的结构。 具体内容可以参考下面的大牛的文章: System.IO.Pipelines: High performance IO in .NET - .NET Blog (https://devblogs.microsoft.com/dot…