nalinv-ui/vue.config.js

/**
 * 配置参考:
 * https://cli.vuejs.org/zh/config/
 */
const url = 'http://mom-gateway:9999'
// const url = 'http://192.168.110.148:11001/'
// const url = 'http://192.168.100.8:11001'
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const path = require('path')
const FileManagerPlugin = require('filemanager-webpack-plugin')

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

module.exports = {
  lintOnSave: true,
  productionSourceMap: false,
  chainWebpack: (config) => {
    const entry = config.entry('app')
    entry.add('babel-polyfill').end()
    entry.add('classlist-polyfill').end()
    // set svg-sprite-loader
    config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
      .end()
    config.module
      .rule('tsx')
      .test(/\.tsx?$/)
      .use('ts-loader')
      .loader('ts-loader')
      .options({
        appendTsSuffixTo: [/\.vue$/],
      })
      .tap((options) => {
        return options
      })
  },
  css: {
    // 忽略 CSS order 顺序警告
    extract: { ignoreOrder: true },
  },
  configureWebpack: (config) => {
    let deleteOriginalAssets = false
    if (process.env.NODE_ENV === 'production') {
      // 仅在生产环境下启用该配置
      deleteOriginalAssets = true
    }

    let fileManagerPlugin = new FileManagerPlugin({
      events: {
        onEnd: {
          delete: ['./target'],
          mkdir: ['./target'],
          copy: [
            {
              source: './dist',
              destination: './target/dist/dist/',
            },
          ],
          archive: [
            {
              source: './target/dist',
              destination: './target/dist.zip',
            },
          ],
        },
      },
    })

    let configure = {
      performance: {
        // 打包后最大文件大小限制
        maxAssetSize: 1024000,
      },
      plugins: [
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 1024, // 只有大小大于该值的资源会被处理,当前配置为对于超过1k的数据进行处理，不足1k的可能会越压缩越大
          minRatio: 0.99, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: deleteOriginalAssets, // 删除原文件
        }),
      ],
    }

    if (process.env.NODE_ENV === 'production') {
      configure.plugins.push(fileManagerPlugin)
    }

    if (process.env.NODE_ENV === 'development') {
      // 開發環境使用
      // configure.devtool = 'source-map'
    }
    return configure
  },
  // 配置转发代理
  devServer: {
    disableHostCheck: true,
    port: 8080,
    proxy: {
      '/': {
        target: url,
        ws: false, // 需要websocket 开启
        pathRewrite: {
          '^/': '/',
        },
      },
    },
  },
}