vue-cli@3.0 直接打包成zip压缩文件

开始之前

vue写项目完成之后我们会打包，然后将dist文件压缩成zip发给后台，让后台部署在服务器上，这样一次两次还行，但是次数多了，特别是在频繁测试的时候多了一步手动压缩的过程，会很烦！所以有没有办法直接打包出一个zip文件呢？

filemanager-webpack-plugin插件

webpack的  filemanager-webpack-plugin 插件可以帮我们实现这个功能

1. 首先我们需要安装这个插件,因为这是开发依赖所以我们安装到devDependencies

yarn add filemanager-webpack-plugin --dev

2. 接下来需要再项目中配置一下，由于我们用的脚手架是vue-cli@3.0，所以我们需要再vue.config.js中配置，如果没有这个文件可以自己创建一个。

//首先需要引入filemanager-webpack-plugin插件
const FileManagerPlugin = require('filemanager-webpack-plugin') 

module.exports = {
  configureWebpack: {  //webpack的相关配置在这里
    plugins: [
      new FileManagerPlugin({  //初始化 filemanager-webpack-plugin 插件实例
        onEnd: {
          delete: [   //首先需要删除项目根目录下的dist.zip
            './dist.zip',   
          ],
          archive: [ //然后我们选择dist文件夹将之打包成dist.zip并放在根目录
            {source: './dist', destination: './dist.zip'},   
          ]
        }
      })
    ]
  }
}

3. 接下来我们就可以用了， 在命令行中输入

   yarn build

   会在出入一个dist文件加的同时输出dist.zip文件

4. 然后不需要手动打开文件夹哦， 直接在命令行中输入

   open ./

   就会直接打开当前文件夹了，然后直接发送吧！！！