carInsightSystem_web/vue.config.js

/*
 * @Author: your name
 * @Date: 2021-10-20 13:15:16
 * @LastEditTime: 2021-12-10 09:25:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/vue.config.js
 */
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
// 1. 引入等比适配插件
const px2rem = require('postcss-px2rem')
// 2. 配置基本大小
// 配置基本大小
const postcss = px2rem({
    // 基准大小 baseSize，需要和rem.js中相同
    remUnit: 16
  })
const version = new Date().getTime()
module.exports = {
    productionSourceMap: false,
    publicPath: "./",
    lintOnSave: false,
    devServer: {
      port: 9527
    },
    configureWebpack: config => {
        //添加版本号
        config.output.filename = `static/js/[name].${version}.js`;
        config.output.chunkFilename = `static/js/[name].${version}.js`
        if (process.env.NODE_ENV === 'production') {
          //  配置productionGzip-高级的方式
          // 配置参数详解
          // asset： 目标资源名称。 [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
          // algorithm： 可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
          // test： 所有匹配该正则的资源都会被处理。默认值是全部资源。
          // threshold： 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
          // minRatio： 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
          config.plugins.push(
            new CompressionWebpackPlugin({
              filename: '[path].gz[query]',
              algorithm: 'gzip',
              test: productionGzipExtensions,
              threshold: 10240,
              minRatio: 0.8,
              deleteOriginalAssets: false
            })
          )
        } else {
          // 开发环境
        }
      },
      css: {
        loaderOptions: {
            // 等比缩放的插件
            postcss: {
                plugins: [
                    postcss
                ]
            }
        }
    }


}