npm run build后将打包文件夹生成zip压缩包

  1. 安装依赖
bash 复制代码
npm install archiver --save-dev
  1. 准备compress.js文件
javascript 复制代码
const fs = require('fs');
const archiver = require('archiver');

const sourceDir = './dist';  //替换为你的文件夹路径
const outputZip = './dist.zip';

console.log(`开始压缩`);
const output = fs.createWriteStream(outputZip);
const archive = archiver('zip', { zlib: { level: 9 } });

output.on('close', () => {
  console.log(`压缩完成: ${archive.pointer()} 字节`);
});

archive.pipe(output);
archive.directory(sourceDir, true);//true则保留顶级目录,false则不保留
archive.finalize();
  1. 在package.json中调用compress.js

在build命令后面,添加并执行一个postbuild命令。

javascript 复制代码
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "postbuild": "node compress.js"
  },

于是,当运行npm run build后,会先生成打包文件夹,再基于该文件夹生成zip压缩包。

相关推荐
烂笔头儿@40 分钟前
vue 实现table上下拖拽行功能
前端·javascript·vue.js
_长银1 小时前
跨平台开发框架electron
前端·javascript·electron
blues_C2 小时前
七、【前端路由篇】:Vue Router 实现页面导航、动态路由与权限控制
前端·javascript·vue.js
Dayunyun20192 小时前
web常见的攻击方式(下)
前端
金串串2 小时前
js-day4
开发语言·前端·javascript
啊啊啊~~2 小时前
js 手写promise
开发语言·前端·javascript
Lhuu(重开版2 小时前
Vue:axios(POST请求)
前端·javascript·vue.js
dog shit2 小时前
web第七次课后作业--springbootWeb响应
java·前端·windows
未来之窗软件服务2 小时前
动态表单开发避坑:改变input的值不会触发change事件即时修复策略-WdatePicker ——仙盟创梦IDE
前端·javascript·html·仙盟创梦ide·东方仙盟
患得患失9493 小时前
【前端】【css预处理器】Sass与Less全面对比与构建对应知识体系
前端·css·sass