Vue gzip压缩导致js无法解析 Content-Type: text/html(JS内容)（压缩完成是xxx.js.gz）

Question

压缩配置 Vue.config.js

插件compression-webpack-plugin

// gzip压缩

    config.plugin('compressionPlugin')
    .use(
      // 代码混淆
      new CompressionWebpackPlugin({
        // eslint-disable-next-line
        filename: "[file].gz[query]",
        algorithm: 'gzip',
        test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i,
        threshold: 10240,
        minRatio: 1,
        deleteOriginalAssets: true
      })
    )
    

压缩后的js是xxx.js.gz

NGINX配置

# gzip 配置
gzip on; #开启或关闭gzip on off
gzip_disable "msie6"; #不使用gzip IE6
gzip_min_length 100k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
gzip_buffers 4 16k; #buffer 不用修改
gzip_comp_level 8; #压缩级别:1-10，数字越大压缩的越好，时间也越长
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  压缩文件类型    

# histroy路由模式配置
location ^~/xxx/driver {
        root   /xxx/static_resource;
        index  index.html index.htm;
        try_files $uri $uri/ /xxx/driver/index.html;    
    }

实际请求返回内容 js文件

1. 问题1为什么没返回js文件是因为 压缩后的是js.gz 项目里依旧引用的js 所以路径错误么？

2. 是因为nginx配置错误么?所以没走gzip

Answer 1

nginx开启gzip_static on;这个指令就可以了。详细的官方文档内容参考： https://nginx.org/en/docs/htt...