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: {
      '/api': {
        target: 'http://192.168.3.86:7654',
        secure: false, // 是否支持 https，默认 false
        changeOrigin: true, // 是否支持跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  configureWebpack: config => {
    config.devtool = 'source-map'
    // 代码拆分
    config.optimization.splitChunks.chunks = 'all'
    config.output.filename = `static/js/[name].${Timestamp}.js`
    config.output.chunkFilename = `static/js/[name].${Timestamp}.js`

    config.module.rules.push(
      {
        test: /\.geojson$/,
        loader: 'json-loader',
        type: 'javascript/auto'
      },
      // 其他加载器规则...
      {
        test: /\.jade$/,
        loader: 'jade'
      },
      {
        test: /\.pug$/,
        loader: 'pug-plain-loader'
      })
    if (process.env.NODE_ENV === 'production') {
      // 压缩 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: [
    'axios'
  ],
  // 移除console
  terser: {
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
          @import "@/styles/config.scss";
        `
      }
    }
  }
})