hyyfScreen/vue.config.js

const CompressionWebpackPlugin = require("compression-webpack-plugin");
const path = require('path')
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
  publicPath: './', // 相对于 HTML 页面（目录相同）
  chainWebpack: config => {
    config.module
      .rule('css')
      .test(/\.css$/)
      .oneOf('vue')
      .resourceQuery(/\?vue/)
      .use('px2rem')
      .loader('px2rem-loader')
      .options({
        remUnit: 192   //代表的是 1rem = ？px  这里假设设计稿是 1920px ，那么这里的比例就是 1/10
      })
      .end()
  },
  configureWebpack: config => {
    if(process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new CompressionWebpackPlugin({
          /* [file]被替换为原始资产文件名。
             [path]替换为原始资产的路径。
             [dir]替换为原始资产的目录。
             [name]被替换为原始资产的文件名。
             [ext]替换为原始资产的扩展名。
             [query]被查询替换。*/
          filename: '[path].gz[query]',
          //压缩算法
          algorithm: 'gzip',
          //匹配文件
          test: productionGzipExtensions,
          //压缩超过此大小的文件,以字节为单位
          threshold: 10240,
          minRatio: 0.8,
          //删除原始文件只保留压缩后的文件
          //deleteOriginalAssets: false
        })
      )
    }
    config.resolve.alias = {
      '@': path.resolve(__dirname, 'src'),
      'components': '@/components',
      'views': '@/views',
      'assets': '@/assets',
      'utils': '@/utils'
    }
  },
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      }
    }
  },
}