cnbg_web/vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const ThemeColorReplacer = require('webpack-theme-color-replacer');
const forElementUI = require('webpack-theme-color-replacer/forElementUI');
const themeUtil = require('webpack-theme-color-replacer/themeUtil');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path'); // 确保引入 path 模块
const productionGzipExtensions = ['js', 'css'];

module.exports = {
  publicPath: '/',
  outputDir: 'dist', // 确保输出目录为 dist
  lintOnSave: true,
  productionSourceMap: false,
  chainWebpack: (config) => {
    const entry = config.entry('app');
    entry.add('babel-polyfill').add('classlist-polyfill').end();

    // 自定义换肤
    config
      .plugin('webpack-theme-color-replacer')
      .use(ThemeColorReplacer)
      .tap((options) => {
        options[0] = {
          matchColors: [
            ...forElementUI.getElementUISeries('#409EFF'), // element-ui 主色系列
            '#0cdd3a', // 自定义颜色
            '#c655dd'
          ], // 需要全 CSS 查找的颜色数组，支持 RGB 和 HSL。
          changeSelector: themeUtil.changeSelector,
          fileName: 'css/theme-colors-[contenthash:8].css', // 输出 CSS 文件名，支持 [contenthash] 和 [hash]。
          injectCss: false, // 将 CSS 文本注入到 JS 文件中，不需要再下载 `theme-colors-xxx.css`。
          isJsUgly: process.env.NODE_ENV !== 'development'
        };
        return options;
      });
  },
  css: {
    loaderOptions: {
      css: {
        url: {
          filter: (url, resourcePath) => {
            // 如果 URL 以 '/' 开头，则不让 Webpack 处理
            if (url.startsWith('/')) {
              return false;
            }
            return true;
          }
        }
      }
    }
  },
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionWebpackPlugin({
            // 修改 filename 配置，确保包含原始文件的扩展名，避免命名冲突
            filename: '[path][base].gz', // 使用 [base] 包含文件名及扩展名，如 index.js.gz
            algorithm: 'gzip',
            test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
            threshold: 1024, // 仅压缩大于1KB的文件
            minRatio: 0.99, // 压缩率低于0.99时启用
            deleteOriginalAssets: false // 建议保留原始文件，避免删除后可能导致的问题
          }),
          new MiniCssExtractPlugin({
            ignoreOrder: true // 忽略 CSS 顺序警告
          })
        ],
        // 可选：优化输出路径，确保所有文件输出到统一目录，避免路径冲突
        output: {
          filename: 'js/[name].[contenthash].js',
          chunkFilename: 'js/[name].[contenthash].js'
        },
        // 可选：增加 stats 以便调试
        stats: 'normal'
      };
    }
  },
  // 配置转发代理
  devServer: {
    client: {
      overlay: false
    },
    allowedHosts: 'all', // 替代 disableHostCheck: true，允许所有主机访问
    port: 8080,
    proxy: {
      '/': {
        target: process.env.VUE_APP_URL,
        ws: false, // 需要 WebSocket 时设置为 true
        pathRewrite: {
          '^/': '/'
        }
      }
      // 3.5 以后不需要再配置
    }
  }
};