原创文章，转载请注明出处，谢谢！

安装插件

npm i -D compression-webpack-plugin

修改vue.config.js

const CompressionPlugin = require("compression-webpack-plugin")

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css/, //匹配文件名
            threshold: 10240,//对超过10k的数据压缩
            deleteOriginalAssets: false //不删除源文件
          })
        ]
      }
    }
  }
}

配置nginx

在nginx配置文件中增加如下配置：

location ~* \.(css|js)$ {
  gzip_static on;
}

这是 nginx 的静态 gzip功能，会自动查找对应扩展名的文件，如果存在 gzip 文件，就使用，如果没有就用原文件。

说明：
因为我们在构建的时候已经生成好了压缩文件，所以只需要开启nginx的静态gzip功能就可以。如果不在构建的时候压缩，nginx也可以压缩，配置方法可以参考我的另一篇文章：nginx开启gzip压缩。

参考：https://www.jianshu.com/p/1738f9f092ee