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

相关推荐
....492几秒前
Vue3 与 AntV X6 节点传参、自动布局及边颜色控制教程
前端·javascript·vue.js
machinecat2 分钟前
Webpack模块联邦 - vue项目嵌套react项目部分功能实践
前端·webpack
今禾4 分钟前
深入浅出:ES6 Modules 与 CommonJS 的爱恨情仇
前端·javascript·面试
前端小白19954 分钟前
面试取经:Vue篇-Vue2响应式原理
前端·vue.js·面试
子兮曰4 分钟前
⭐告别any类型!TypeScript从零到精通的20个实战技巧,让你的代码质量提升300%
前端·javascript·typescript
前端AK君5 分钟前
如何开发一个SDK插件
前端
小满xmlc5 分钟前
WeaveFox AI 重新定义前端开发
前端
日月晨曦7 分钟前
大文件上传实战指南:让「巨无霸」文件也能「坐高铁」
前端
bug_kada7 分钟前
防抖函数:从闭包入门到实战进阶,一篇文章全搞定
前端·javascript