Vue 静态文件部署nginx gzip 设置

修改配置文件 vue.config

const  CompressionWebpackPlugin  = require("compression-webpack-plugin");
const productionGzipExtensions = ['js', 'css']
module.exports = {
    outputDir: 'dist',
    lintOnSave: false,
    configureWebpack: {
        plugins: [
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            })
        ]
    },
    css: {
        loaderOptions: {
            less: {
                // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
                lessOptions: {
                    modifyVars: {
                        // 直接覆盖变量
                        'border-color': '#eee',
                    },
                },
            },
        },
    },
};

vue 使用webpack插件打包时候报错

compression-webpack-plugin 目前最新版是 7.1.0

解决方法：

先卸载，再装个低一点的版本

npm uninstall compression-webpack-plugin

npm i compression-webpack-plugin@5.0.1

nginx 设置

设置在http区块

// nginx开启gzip服务
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;

// 需要开启gzip的格式
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript image/jpeg image/gif image/png image/jpg;