vue项目build自动生成zip压缩文件

背景：

想用vue3+vite2搭建项目，发现对node.js有要求。Vite 需要 Node.js 版本 >= 12.0.0。但是公司前端项目均是用jenkins自动化部署，在jenkins中拉包再编译的。而这时发现jenkins上的nodejs版本过低，尝试过安装新版本nodejs没有成功，原因找了很久，原因是服务器操作系统太低，nodejs的依赖问题造成的。考虑到影响面，不可能重新装服务器的。所以才想到前端编译好代码再拉到服务器上。

1. 安装rimraf，相当于UNIX 命令 rm -rf。

npm install rimraf --save-dev

2. 安装压缩文件夹插件filemanager-webpack-plugin。

npm install filemanager-webpack-plugin --save-dev

3. 配置vue.config.js:(这里请忽略“speed-measure-webpack-plugin”打包速度分析插件)

const isdev = process.env.VUE_APP_NODE_ENV !== 'production';

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); // 打包速度分析插件

const smp = new SpeedMeasurePlugin();

const FileManagerPlugin = require('filemanager-webpack-plugin'); // 压缩文件夹

... ...

module.exports = {

... ...

configureWebpack: smp.wrap({

    plugins: [

        ... ...

      !isdev && new FileManagerPlugin({

        events: {

          onEnd: {

            // delete: [ './dist.zip'],

            archive: [{ source: './dist', destination: './dist.zip' }]

          }

        }

      })

    ]

})

4. 配置package.json编译环境命令：（编译并压缩后再删除dist文件夹）

"scripts": {

    ... ...

    "build": "vue-cli-service build",

    "build:zip": "vue-cli-service build && rimraf dist",

  },

执行npm run build就能看到根目录下的dist.zip压缩包了，如果要删除dist文件夹则执行npm run build:zip