remuneration/vue.config.js

'use strict'
const { defineConfig } = require('@vue/cli-service')
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// 配置编辑器
const Timestamp = new Date().getTime()

module.exports = defineConfig({
  // 项目部署的基本路径，默认 '/'
  publicPath: '/',
  assetsDir: 'static',
  // 项目打包是否生成js的 source map 调试包，默认 true，生产部署设置为false
  productionSourceMap: process.env.NODE_ENV !== 'production',
  // devServer 支持 webpack-dev-server 所有选项
  devServer: {
    open: true,
    // host: 'localhost',
    port: 9000,
    hot: true,
    // https: false,
    proxy: {
      '/op/base': {
        // target: 'http://192.168.3.162:7654',
        target: 'https://company.citupro.com:18182/op/base',
        secure: false, // 是否支持 https，默认 false
        changeOrigin: true, // 是否支持跨域
        headers: {
          // 确保包含这些头部以兼容IE11
          Accept: 'application/json',
          'Content-Type': 'application/json; charset=utf-8'
        },
        onProxyReq (proxyReq) {
          // 对于IE11的特殊处理
          if (proxyReq.getHeader('origin')) {
            proxyReq.setHeader('origin', 'https://company.citupro.com:18182/op/base')
          }
        },
        pathRewrite: {
          '^/op/base': ''
        }
      },
      '/op/base/api': {
        // target: 'http://192.168.3.162:7654',
        target: 'https://company.citupro.com:18183',
        secure: false, // 是否支持 https，默认 false
        changeOrigin: true, // 是否支持跨域
        headers: {
          // 确保包含这些头部以兼容IE11
          Accept: 'application/json',
          'Content-Type': 'application/json; charset=utf-8'
        },
        onProxyReq (proxyReq) {
          // 对于IE11的特殊处理
          if (proxyReq.getHeader('origin')) {
            proxyReq.setHeader('origin', 'https://company.citupro.com:18183')
          }
        },
        pathRewrite: {
          '^/op/base/api': '/op/base/api'
        }
      }
    }
  },
  configureWebpack: config => {
    config.devtool = 'source-map'
    // 代码拆分
    // config.optimization.splitChunks.chunks = 'all'
    // 代码拆分配置
    config.optimization.splitChunks = {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          name: 'vendors'
        },
        common: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
    config.output.filename = `static/js/[name].${Timestamp}.js`
    config.output.chunkFilename = `static/js/[name].${Timestamp}.js`
    // 确保 polyfill 最先加载
    config.entry = {
      app: [
        'core-js/stable',
        'regenerator-runtime/runtime',
        'whatwg-fetch', // 添加 fetch polyfill
        './src/main.js'
      ]
    }

    config.module.rules.push(
      {
        test: /\.geojson$/,
        loader: 'json-loader',
        type: 'javascript/auto'
      },
      // 其他加载器规则...
      {
        test: /\.jade$/,
        loader: 'jade'
      },
      {
        test: /\.pug$/,
        loader: 'pug-plain-loader'
      },
      // 确保所有 JS 文件都经过 Babel 转译
      {
        test: /\.js$/,
        include: [
          // 特别包含可能有问题的 node_modules
          /node_modules\/element-ui/,
          /node_modules\/vue/,
          /node_modules\/axios/,
          /node_modules\/@wangeditor/
        ],
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                targets: { ie: '11' },
                useBuiltIns: 'usage',
                corejs: 3
              }]
            ]
          }
        }
      })
    if (process.env.NODE_ENV === 'production') {
      const TerserPlugin = require('terser-webpack-plugin')
      config.optimization.minimizer = [
        new TerserPlugin({
          parallel: true,
          terserOptions: {
            ecma: 5, // 指定为 ES5
            compress: {
              drop_console: true,
              drop_debugger: true,
              pure_funcs: ['console.log'] // 移除特定的 console 方法
            },
            output: {
              comments: false,
              beautify: false,
              // 确保不生成 ES6+ 语法
              ecma: 5
            },
            // 特别针对 IE11 的兼容性设置
            ie8: true
          }
        })
      ]

      // 添加 ES5 输出的额外配置
      // config.output.environment = {
      //   arrowFunction: false, // 不生成箭头函数
      //   const: false,         // 不生成 const
      //   destructuring: false, // 不生成解构赋值
      //   forOf: false          // 不生成 for...of
      // }
      // // 压缩 JS 文件
      // config.plugins.push(
      //   new UglifyJsPlugin({
      //     uglifyOptions: {
      //       compress: {
      //         drop_console: true,
      //         drop_debugger: true
      //       },
      //       output: {
      //         comments: false // 移除注释
      //       }
      //     },
      //     sourceMap: false,
      //     parallel: true
      //   }))
    }
  },
  chainWebpack: config => {
    config.when(process.env.NODE_ENV !== 'development', config => {
      config.optimization.minimizer('terser').tap(options => {
        options[0].terserOptions.compress.drop_console = true
        options[0].terserOptions.output = {
          comments: false
        }
        return options
      })
    })
  },
  // babel-loader 是否处理 node_modules 中的依赖包，处理哪些依赖包，参数类型: boolean | Array<string | RegExp>
  transpileDependencies: [
    /[\\/]node_modules[\\/]/ // 转译所有 node_modules 中的依赖
    // Vue 相关
    // 'vue',
    // 'vuex',
    // 'vue-router',
    // '@vue/composition-api',

    // // UI 组件库
    // 'element-ui',

    // // 编辑器
    // '@wangeditor/editor',
    // '@wangeditor/editor-for-vue',

    // '@mdi/font',

    // 'scrolling-element',

    // // 其他可能包含 ES6 代码的依赖
    // 'fs',
    // 'qs',
    // 'axios',
    // 'lodash',
    // 'echarts',
    // 'decimal.js',
    // 'nprogress',
    // 'element-resize-detector',

    // // 使用正则匹配更广泛的包
    // /node_modules\/@wangeditor/,
    // /node_modules\/vue-/,
    // /node_modules\/element-ui/,
    // /node_modules\/echarts/
  ],
  // 移除console
  terser: {
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
          @import "@/styles/config.scss";
        `
      }
    }
  }
})