vue-cli3使用gzip解决前端打包资源文件过大的问题

本方案适用于vue-router-history模式的前后端分离项目，前端项目部署在nginx下。

环境

Node 8.11.4
Vue-CLI 4.x
Nginx 1.15.7

安装插件

npm install compression-webpack-plugin

配置vue.config.js

先引入插件

const CompressionPlugin = require('compression-webpack-plugin');

在module.exports中添加下方module.exports内的代码。

module.exports = {

/*从这里开始添加*/
    configureWebpack: config => {
        if(process.env.NODE_ENV === 'production'){
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/,
                    threshold: 10240,
                    deleteOriginalAssets: false
                })]
            }
        }
    }
/*到这里结束*/

}; 

配置Nginx

我这里router是history模式的，在之前的博客中提到过相应的配置方法。
我这里是域名下只有一个项目的配置，如果你的环境是一个域名多个项目，可以适当对齐调整，原理是一样的。

请参考下方代码对之前项目所配置的location进行修改

之前的

location / {    
           root e:\workgit\abc;
    error_page 405 =200 http://$host:8085/$request_uri; 
           index  index.html index.htm;
           try_files $uri $uri/ @rewrites; 
        } 
        
        location @rewrites {
        rewrite ^(.*)$ /index.html last;
    }

更新后

location / {    
           root e:\workgit\abc;
    error_page 405 =200 http://$host:8085/$request_uri; 
                gzip on;
                gzip_static on;
                gzip_http_version 1.1;
                gzip_comp_level 3;
                gzip_types text/plain application/json application/x-javascript application/css application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-ms-bmp;
           index  index.html index.htm;
           try_files $uri $uri/ @rewrites; 
        } 
        
        location @rewrites {
        rewrite ^(.*)$ /index.html last;
    }

请不要无脑复制。