vue 进行gzip压缩的踩坑之路

最近使用vue做了一个项目，项目完成后需要上传到服务器，结果打开服务器的项目时，页面等了13s才打开，这才发现项目打包后的其中一个js文件大小达到1.2m，所以赶紧进行压缩，这里我用到了gzip。

一、下载压缩插件

npm install --save-dev compression-webpack-plugin

二、在配置文件进行更改

在config的index.js文件找到productionGzip，将属性值false改为true。

三、在nginx服务器配置

进入nginx.conf文件里进行配置，进入的路径在上一篇博客有提到，详情请看MobaXterm配置端口步骤。

具体代码是：

server {
            listen 88;
            server_name localhost;

            location / {
                gzip on;
                gzip_min_length 1k;
                gzip_buffers 16 64k;
                gzip_http_version 1.1;
                gzip_comp_level 9;
                gzip_types text/plain text/javascript application/javascript image/jpeg image/gif image/png application/font-woff application/x-javascript text/css application/xml;
                gzip_vary on;
                root html/subCharge;
                index index.html index.htm;
            }

            location /api {
                # rewrite  ^/apis/(.*)$ /$1 break;
                proxy_pass   http://47.92.34.130:8080/chargeSub/;
            }

         }

四、重启服务器     ./nginx -s reload 

npm run build 之后，本来以为是可以了，然而。。。报了一下的错误：

去百度了一下，说要修改build/webpack.prod.conf.js。asset这个选项是无效的，要改成filename。

so，我又重新npm run build，结果还是报错。。。再去找百度，说是asset改成filename后，压缩插件版本号要对应1.x。修改了版本号后，最终可以了。至于为什么，就去看看compression-webpack-plugin的文档吧。