kicc-workflow-design/vue.config.js

const path = require('path');
const { name } = require('./package');
const resolve = (dir) => path.join(__dirname, dir)
const DEV_PORT = 7102
const TEST_OUTPUT_DIR = 'docker/test/dist'
const PROD_OUTPUT_DIR = 'docker/prod/dist'

module.exports = {
  assetsDir: 'static',
  outputDir: process.env.ENV === 'test' ? TEST_OUTPUT_DIR : PROD_OUTPUT_DIR,
  chainWebpack: config => {
    config.resolve.alias.set('@', resolve('src'))
    config.resolve.alias.set('@components', resolve('src/components'))
    config.resolve.alias.set('@utils', resolve('src/utils'))
    config.output
      .library(`${name}-[name]`)
      .libraryTarget('umd')
      .jsonpFunction(`webpackJsonp_${name}`)
    // 指定pinia.cjs采用es导入导出,避免出现采用CommonJS的模式导出导致浏览器不支持
    config.module.rule('pinia-mjs-loader')
      .test(/\.mjs$/)
      .include
      .add(/node_modules/)
      .end()
      // 将.mjs文件当作普通JavaScript模块处理
      .type('javascript/auto')

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config.optimization.splitChunks({
            chunks: 'all',
            cacheGroups: {
              libs: {
                name: 'chunk-libs',
                test: /[\\/]node_modules[\\/]/,
                priority: 10,
                chunks: 'initial' // only package third parties that are initially dependent
              },
              elementUI: {
                name: 'chunk-elementUI', // split elementUI into a single package
                priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
              },
              commons: {
                name: 'chunk-commons',
                test: resolve('src/components'), // can customize your rules
                minChunks: 3, //  minimum common number
                priority: 5,
                reuseExistingChunk: true
              }
            }
          })

          // fixme: 默认css文件中的url()不能根据__webpack_public_path__来动态改变根路径
          config.module
            .rule('fonts')
            .test(/.(ttf|otf|eot|woff|woff2)$/)
            .use("url-loader")
            .loader("url-loader")
            .tap((options) => ({
              name: "/static/fonts/[name].[ext]",
            }))
        }
      )
  },
  devServer: {
    host: '0.0.0.0',
    port: DEV_PORT,
    open: false,
    disableHostCheck: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: `http://192.168.3.10:9999`,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
  }
}