首先这个是需要后台帮忙配置的，后台不配合就不用看了。。。。

nginx 服务端开启Gzip

server
{
    listen 80 default_server;
    server_name 106.13.190.39;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/106.13.190.39;#上面是我服务器自己一些配置
    
    gzip  on;  #开启gzip压缩输出
    gzip_min_length 1k;  #最小压缩文件大小
    gzip_buffers 4 16k;  #压缩文件缓冲区
    gzip_comp_level 2;   #压缩等级
    #gzip_http_version 1.0; #压缩版本(默认1.1，前端如果是squid2.5请使用1.0)
    gzip_types text/plain application/javascript application/x-javascript text/css 
    application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png 
    image/x-icon;    
    gzip_vary off; //是否放客户端也看到是否开启了
    ----------
}

 

Vue脚手架配置

下载插件

npm install compression-webpack-plugin -D

下载完成后修改vue.config.js

const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
    configureWebpack: {
        plugins: [
            new CompressionPlugin({
                test: /\.(js|css)(\?.*)?$/i,//需要压缩的文件正则
                threshold: 10240,//文件大小大于这个值时启用压缩
                deleteOriginalAssets: false//压缩后保留原文件
            })
        ]
      },
 }

 重新打包,部署后查看是否开启