DataOps-web/vue.config.js

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

// if (process.env.NODE_ENV === 'production') {
//   fs.writeFile('./public/version.json', JSON.stringify({ version: Timestamp }), () => {
//     console.log('新版本号生成成功')
//   })
// }
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: 18183,
    hot: true,
    // https: false,
    proxy: {
      '/api': {
        target: 'https://company.citupro.com:18183',
        secure: false, // 是否支持 https，默认 false
        changeOrigin: true // 是否支持跨域
      },
      '/op/base': {
        target: 'https://company.citupro.com:18183',
        secure: false, // 是否支持 https，默认 false
        changeOrigin: true // 是否支持跨域
      }
    }
  },
  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'
      })
    config.plugins.push(
      new WriteFilePlugin({
        test: /version\.json$/,
        useHashIndex: true
      })
    )
    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: [
    '@vue-office/excel',
    'vue-demi',
    '@vue-office',
    'xlsx',
    'exceljs',
    'html2canvas',
    '@handsontable',
    '@handsontable/vue',
    'handsontable',
    'handsontable/registry',
    'js-base64',
    'vis-network',
    'vuetify',
    'axios'
  ]
})