两天前，该项目上线，并与vue-cli npm run build命令打包在一起。包装完成后，我很震惊，15M。本来暂时不打算优化，但每次看部署包这么大，还是优化一下，让包好看一点，以免以后出现心理阴影！

杀死地图文件后，发现webpack的打包速度也很感人。当设置地图文件不自动生成时，如果您看到webpack附带的productionGzip函数，您可以一次完成所有操作。

下面是一个盲目的过程，几乎走不出来。

1.在项目根目录config/index.js的构建中找到productionGzip: false，并将false更改为true。与生产源图相反。

修改属性值后，此时可以执行npm运行构建。但是，将报告一个错误，指示找不到“找不到模块”压缩-web pack-plugin。

2.也就是说，官方推荐的依赖于compression-webpack-plugin需要安装的命令是：(但是如果网络不好，那就凉了)

NPM安装-保存-开发压缩-网络包-插件//当没有给出版本号时，这个命令默认安装最新版本的压缩-网络包-插件。问题在于安装完成后，npm run build被重新运行，然后是悲剧：

从错误报告显示可知，配置选项的验证失败，但不知道哪一个失败了，或者哪一个失败了。当你打开错误报告日志时，你会越来越困惑，看起来一片空白。我从源代码中看不出原因。

根据验证参数，只有两个参数，但第一个参数中有许多属性。

从结果来看，在这一行代码中执行的验证失败。至于这一行代码执行什么，级别不够检查。

最后，我别无选择，只能去https://www.npmjs.com/package/compression-webpack-plugin,官网看看有没有突破。2.0.0公开发布3个月前乍一看，感觉有点不对劲。一般小版本的更新都是1.xx.xx很少有直接全零的，全零一般适用于大版本的升级更新。看看上面的配置项，验证失败，选项属性不匹配。突然有种被坑的奇怪感觉。然后看下面的介绍和文档。首先对应下节点【emailprotected】的版本，还在匹配范围内。要求：这个模块最少需要Nodev6.9.0和Webpack v4.0.0(这个模块至少需要node V6.9.0和webpack v4.0.0)，但是我的Webpack版本明显落后很多。现在我终于找到症结所在了。

3.找到症结，就好办了。由于最新版本太高，使用中的webpack爬不上去，只能降级。

卸载最新版本的2.0compression-webpack-plugin安装包。

卸载NPM-保存-开发压缩-网络包-插件重新安装版本1.1.12(这是1.1的最新版本)。事实上，卸载是不必要的，而不是直接执行安装命令并覆盖版本。

NPM安装-保存-开发[电子邮件保护]//记得带版本号。安装后，重新执行npm运行构建进行打包，最终成功。真他妈的难！

在安装过程中，遇到了另一个问题。网络速度和墙壁问题：

这个很容易解决，就用淘宝镜像。安装过程、可能出现的问题和解决方案可参考https://www.jb51.net/article/166090.htm!

摘要

以上就是解决vue-cli webpack打包打开时Gzip错误问题的解决方案，对大家都有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！