[JavaScript] 纯文本查看 复制代码

npm install compression-webpack-plugin

配置vue.config.js

先引入插件

[JavaScript] 纯文本查看 复制代码

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

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

[JavaScript] 纯文本查看 复制代码

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进行修改
之前的

[JavaScript] 纯文本查看 复制代码

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;
    }

更新后

[JavaScript] 纯文本查看 复制代码

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;
    }

[JavaScript] 纯文本查看 复制代码

npm install compression-webpack-plugin

配置vue.config.js

先引入插件

[JavaScript] 纯文本查看 复制代码

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

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

[JavaScript] 纯文本查看 复制代码

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进行修改
之前的

[JavaScript] 纯文本查看 复制代码

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;
    }

更新后

[JavaScript] 纯文本查看 复制代码

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;
    }