Vue如何在 build 的时候打包生成 dist.zip 文件

Vue如何在 build 的时候生成 dist.zip 文件

这里需要用到 ​​filemanager-webpack-plugin​​ 这个 npm 包，它可以添加、删除文件夹、文件，很方便。

官方使用说明：
​​​https://www.npmjs.com/package/filemanager-webpack-plugin​​

我打算实现的： 在 build 之后，把 ​​dist​​​ 文件夹打包到 ​​./archive/dist-20220112103242.zip​​ 文件中

一、添加必要的插件

往 ​​package.json​​​ 中添加 ​​filemanager-webpack-plugin​​​ 、​​moment​​ 插件。

​​moment​​ 用于生成格式化后的字符串，项目中经常用到时间计算，一般都有安装，方便得很，具体去看官方文档

你可以使用 npm 安装的方式：

npm i filemanager-webpack-plugin moment

不过我的习惯是直接往 ​​package.json​​​ 中添加对应包的信息，然后使用 ​​yarn​​ 安装

二、编辑 vue.config.js 文件

这里我只写打包部分的配置，其它配置不写

const FileManagerPlugin = require('filemanager-webpack-plugin')
const Moment = require('moment')

module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production'){ // 只在 npm build 时生成 dist.zip 
            let packTimeString = new Moment().format('YYYYMMDDHHmmss') // 打包时间
           let plugins = []
            plugins.push(
                new FileManagerPlugin({
                    events: {
                        onEnd: {
                            mkdir: ['./archive'], // 新建 ./archive 目录
                            archive: [
                                // 打包 ./dist 到 ./archive/dist-datetime.zip 压缩文件中，压缩包中不带 dist 外壳
                                {source: './dist', destination: `./archive/dist-${packTimeString}.zip`},
                            ]
                        }
                    }
                })
            )
            config.plugins = config.plugins.concat(plugins) // 将新建的 plugin 添加到原 config 中的 plugin 中
        }
    }
}

注意事项：
时间使用格式为 ​​​YYYY-MM-DD HH:mm:ss​​​ 时，会导致一直在 ​​building​​​ ，可能是有空格或 ​​:​​​ 的原因？
改成 ​​​YYYYMMDDHHmmss​​ 就好了

三、结果

生成 xxx. tar.gz 文件

archive: [
   // 打包 压缩包中不带 dist 外壳
   {
     source: '../diary/',
     destination: '../diary.tar.gz',
     format: 'tar',
     options: {
       gzip: true,
       gzipOptions: {
         level: 1,
       },
     }
   },
 ]

其它例子看官方文档： ​​https://www.npmjs.com/package/filemanager-webpack-plugin​​