vue-cli3 如何打包成zip压缩文件

前言

目前在我司，采用前后分离的方式开发，这就会面临一个问题。那就是部署到服务器时如何部署？我们之前的方式是:执行打包命令生成文件夹-> 将文件压缩成zip -> 将zip上传至服务器 ->解压缩 -> 重启服务。

在测试阶段每天都要回归bug，所以每天都要重复执行上述操作。有没有更自动化一些的方式来实现呢？就有了自动化部署，但我在研究自动化部署前，其实我是想在打包的时候自动生成zip文件，然后本地的脚本读取zip并上传至服务器，还有一种思路就是上传脚本可以进行打包压缩zip等。因为我们还有其他部署方式，所以我采用生成zip包与自动部署2步走的方案。

如何实现？

首先项目框架是vue-cli3，我们也都知道vue-cli内置了我们常用的一些webpack配置，比如css压缩、动态生成html等，但它也提供了扩展的方式。

vue-cli3 的webpack配置都放在了根目录下的vue.config.js中。

生成zip的插件是：filemanager-webpack-plugin

(1) 安装依赖 npm install filemanager-webpack-plugin --dev

(2) 打开vue.config.js进行修改。代码如下：

const FileManagerPlugin = require("filemanager-webpack-plugin"); //引入
const packageName = 'dist';
var path = require('path')
module.exports = {
  productionSourceMap: false,
  outputDir: pa