kd-aiot-frontend-ehs/vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin');
const { transformElementScss } = require('ele-admin/lib/utils/dynamic-theme');
const path = require('path');
const { name } = require('./package.json');

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

const publicPath = '/ehs';

module.exports = {
  publicPath,
  lintOnSave: false,
  outputDir: 'dist',
  productionSourceMap: false,
  configureWebpack: {
    performance: {
      maxAssetSize: 2000000,
      maxEntrypointSize: 2000000
    },
    resolve: {
      // webpack5 默认不打包 node 内置模块：sax 在模块加载阶段就会 require('stream')，
      // 若把 stream 置空（fallback: { stream: false }），require 不会抛错但取到的
      // .Stream 是 undefined，sax 执行 Stream.prototype 时会报
      // “Cannot read properties of undefined (reading 'prototype')”，导致应用启动即崩。
      // 这里改为指向一个最小实现的桩模块，既消掉构建告警，也保证运行期不报错。
      alias: {
        stream: path.resolve(__dirname, 'build/stream-stub.js')
      }
    },
    output: {
      // 把子应用打包成 umd 库格式
      library: {
        type: 'umd',
        name: `${name}`
      },

      chunkLoadingGlobal: `webpackJsonp_${name}`
    }
  },
  devServer: {
    headers: {
      // 允许跨域访问子应用页面
      'Access-Control-Allow-Origin': '*'
    },
    // 前端路由为 history 模式，接口与预览服务不能回退到 index.html
    historyApiFallback: {
      index: path.posix.join(publicPath, 'index.html'),
      htmlAcceptHeaders: ['text/html'],
      rewrites: [
        {
          from: /^\/(api|kkfile)(\/|$)/,
          to: (context) => context.parsedUrl.pathname
        }
      ]
    },
    // 代理跨域的配置
    proxy: {
      // 当我们的本地的请求 有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求
      '/api': {
        // target: 'http://192.168.1.251:18086', //开发
        // target: 'http://192.168.1.251:18186', //测试
        // target: 'http://192.168.1.23:18086',//罗
        // target: 'http://192.168.1.144:18086',//付
        target: 'http://192.168.1.102:18086',
        // target: 'http://aiot.zoomwin.com.cn:51001/api',
        changeOrigin: true, // 只有这个值为true的情况下 才表示开启跨域
        pathRewrite: {
          '^/api': ''
        }
      },
      // kkFileView 在线预览服务（word、excel 等文档需要转换后才能预览）
      '/kkfile': {
        target: 'http://aiot.zoomwin.com.cn:51001',
        changeOrigin: true,
        pathRewrite: {
          '^/kkfile': '/kkfile'
        }
      }
    }
  },
  chainWebpack(config) {
    config.plugins.delete('prefetch');
    // set svg-sprite-loader
    // config.module.rule('svg').exclude.add(resolve('./src/icons')).end();
    // config.module
    //   .rule('icons')
    //   .test(/\.svg$/)
    //   .include.add(resolve('./src/icons'))
    //   .end()
    //   .use('svg-sprite-loader')
    //   .loader('svg-sprite-loader')
    //   .options({
    //     symbolId: 'icon-[name]'
    //   })
    //   .end();
    config.module.rule('svg').exclude.add(resolve('src/icons')).end();
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end();

    if (process.env.NODE_ENV !== 'development') {
      // gzip 压缩
      config.plugin('compressionPlugin').use(
        new CompressionWebpackPlugin({
          test: /\.(js|css|html)$/,
          threshold: 10240
        })
      );
    }
  },
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          outputStyle: 'expanded',
          importer: transformElementScss()
        }
      }
    }
  }
};