npm run build 自动生成dist.zip

需求场景:每次项目打包都需要手动将dist文件夹,压缩为dist.zip 比较繁琐

功能实现:每次运行npm run build 自动生成 dist.zip

首先下载插件

bash 复制代码
npm install filemanager-webpack-plugin --save-dev

然后在项目根目录找到:vue.config.js 文件

bash 复制代码
const { defineConfig } = require('@vue/cli-service')
// 插件地址: https://www.npmjs.com/package/filemanager-webpack-plugin
const FileManagerPlugin = require('filemanager-webpack-plugin')
const path = require('path')

module.exports = defineConfig({
  lintOnSave: false,
  transpileDependencies: true,
  // 配置插件
  configureWebpack: {
    plugins: [
      new FileManagerPlugin({
        events: {
          onEnd: {
            delete: ['./dist.zip'],
            archive: [{
              source: path.join(__dirname, './dist'),
              destination: path.join(__dirname, './dist.zip')
            }]
          }
        }
      })
    ]
  }
})

最后在终端运行:npm run build ,运行结束在项目根目录自动生成 dist.zip 压缩包

相关推荐
前端小巷子5 分钟前
跨域问题解决方案:开发代理
前端·javascript·面试
前端_逍遥生6 分钟前
Chrome 插件开发到发布完整指南:从零开始打造 TTS 朗读助手
前端·chrome
Mintopia6 分钟前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
天涯学馆7 分钟前
JavaScript 跨域、事件循环、性能优化面试题解析教程
前端·javascript·面试
掘金一周16 分钟前
别再用 100vh 了!移动端视口高度的终极解决方案| 掘金一周7.3
前端·后端
晴殇i18 分钟前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
咚咚咚ddd20 分钟前
cursor mcp实践:网站落地页性能检测报告(browser-tools)
前端
MiyueFE21 分钟前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript
Hilaku21 分钟前
2025年,每个前端都应该了解的CSS选择器:`:has()`, `:is()`, `:where()`
前端·css
OLong24 分钟前
2025年最强React插件,支持大量快捷操作
前端·react.js·visual studio code