zhzx_ljz_demo_ui/vue.config.js

const { defineConfig } = require('@vue/cli-service')

const path = require('path')
const webpack = require('webpack')
const CompressionWebpackPlugin = require("compression-webpack-plugin");

// import postCssPxToRem from 'postcss-pxtorem'

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = defineConfig({
  transpileDependencies: true,
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: '上海中心大厦',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  },
  // ...other config
  configureWebpack: config => {
    config.performance = {
      hints: 'warning',
      //入口起点的最大体积 整数类型（以字节为单位）
      maxEntrypointSize: 50000000,
      //生成文件的最大体积 整数类型（以字节为单位 300k）
      maxAssetSize: 30000000,
      //只给出 js 文件的性能提示
      assetFilter: function (assetFilename) {
        return assetFilename.endsWith('.js')
      }
    }
    const plugins = [];
    // 同externals一样，我们只想在生产环境下生成gzip即可
    if (process.env.NODE_ENV === 'production') {
      plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path][base].gz[query]', // 生成的文件名
          algorithm: 'gzip', // 类型
          test: new RegExp('\\.(js|css)$'), // 匹配规则
          threshold: 10240, // 字节数 只处理比这个大的资源
          minRatio: 0.8, // 压缩率 只有比这个小的才会处理
          // 是否删除源文件，默认: false
          deleteOriginalAssets: false
        })
      )
    }
    config.plugins = [
      ...config.plugins,
      ...plugins
    ]
    // 增加加载 .geojson 文件的规则
    let rules = [{
      test: /\.geojson$/,
      loader: 'json-loader'
    }]

    config.module.rules = [
      ...config.module.rules,
      ...rules
    ]
  },
  productionSourceMap: false, //打包不生成js.map文件
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@$', resolve('src'))
      .set('@static', resolve('public/static'))
  },
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        path.resolve(__dirname, 'src/assets/less/variable.less')
      ]
    }
  },
  devServer: {
    port: 2011,
  }
})