进行gzip压缩需要下载一个插件

npm install compression-webpack-plugin@6.1.1

注意：6.1.1之后的版本里可能会出现undefind等错误 需要降级处理
在vue.config.js里配置

          const CompressionPlugin = require('compression-webpack-plugin')
                    const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
                    config.resolve.alias.set('@', resolve('src'))
                    config.plugin('compressionPlugin')
                        .use(new CompressionPlugin({
                            filename: '[path].gz[query]',
                            algorithm: 'gzip',
                            test: productionGzipExtensions,
                            threshold: 10240,
                            minRatio: 0.8,
                            deleteOriginalAssets: false
                        }))

注意区分生产和开发环境
然后可以 npm run build:prod

部署到服务器上，需要nginx开启gzip的方法，在nginx.config里配置。注意需要查看自己文件权限，不然访问会出错。最好chmod 755 -R dist （dist是打包后的文件）

在需要的server下添加

			gzip on;
        	gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml application/font-woff  text/css image/svg+xml;
        	gzip_static on;
        	gzip_comp_level 5;
        	gzip_proxied any;
        	gzip_vary on;

如下图，即可：

查看是否开启gzip，chrome浏览器为例子，F12，打开

鼠标右键time，点击response Headers -> content-encoding，即可查看