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 压缩包

相关推荐
林古3 分钟前
我在 WSL 里控制 Windows Chrome 的一次实战复盘(OpenClaw)
前端
想不到一个好的ID22 分钟前
Claude Code 初学者必看指南
前端·后端
一枚菜鸟_24 分钟前
04-Flutter状态管理终极指南-Riverpod3.x从入门到精通
前端
一枚菜鸟_27 分钟前
06-Flutter动画从零到炫酷-让你的App动起来
前端
Wect30 分钟前
React Hooks 核心原理
前端·算法·typescript
shughui34 分钟前
Fiddler下载、安装、使用、汉化,详细图文教程(2026附安装包)
前端·测试工具·fiddler
阿帕琪尔37 分钟前
😎vite插件: 自动打包压缩图片和转webp(二)
前端·vite
思慕很大很大43 分钟前
浏览器基础知识-进程与线程
前端·浏览器
猩猩程序员1 小时前
dial9:一个强悍的 Tokio 调试工具!!!
前端
gyx_这个杀手不太冷静1 小时前
OpenCode 深度解析:架构设计、工具链集成与工程化实践
前端·架构·ai编程