Vue gzip压缩以及版本不同引起的报错

1.先下载

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

2.修改config/index.js

将productionGzip改成true
Vue gzip压缩以及版本不同引起的报错

3.查看或修改webpack.prod.conf.js的配置

可以使用默认配置,也可自行去1.x版本查看配置进行修改

Vue gzip压缩以及版本不同引起的报错

4.运行npm run build

如果dist里面有.gz文件即为压缩成功

5.版本问题

compression-webpack-plugin 存在使用版本不同引起的报错,如果使用的是版本1.x,建议使用上方图片的配置,如果使用的是版本2.x, 点击此链接去进行相关配置,或者使用下方的配置

const CompressionWebpackPlugin = require('compression-webpack-plugin')
  module.exports = {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        test: /(\.js(\?.*)?)|(\.html(\?.*)?)|(\.css(\?.*)?)$/i,
        algorithm: 'gzip',
        cache:true,
        threshold: 10240,
        minRatio: 0.8,
      })
    ]
  }