/* * @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 ] } } } }