vue3-scene-web/vue.config.js

const { defineConfig } = require('@vue/cli-service');
const webpack = require('webpack');
const path = require('path');
const config = require('./config');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

const IS_PRODUCTION = process.env.NODE_ENV === 'production';
// 当前场景
const SCENE = process.env.SCENE;

if (SCENE != null) {
  console.log('当前场景:', SCENE);
}

const ENV = getEnv();

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  indexPath: `${SCENE}.html`,
  publicPath: IS_PRODUCTION ? config.publicPath : '/',
  outputDir: IS_PRODUCTION && !!SCENE ? `build/${SCENE}` : 'build',
  // 根据场景隔离
  assetsDir: path.posix.join(config.assetsDir, SCENE || ''),

  /**
   * 开发服务器配置
   */
  devServer: {
    compress: true,
    host: '0.0.0.0',
    port: process.env.PORT || 80,
    historyApiFallback: true,
    allowedHosts: 'all',
  },

  configureWebpack: {
    devtool: 'source-map',
    resolve: {
      symlinks: false,
      alias: {
        '@': path.join(__dirname, 'src'),
      },
    },
    plugins: [
      new NodePolyfillPlugin(),

      // 扩展 process.env
      new webpack.DefinePlugin(ENV.define),

      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },

  chainWebpack: (webpackConfig) => {
    if (SCENE != null) {
      const extensions = webpackConfig.resolve.extensions.values();
      for (let i = extensions.length - 1; i >= 0; i--) {
        webpackConfig.resolve.extensions.prepend(`.${SCENE}${extensions[i]}`);
      }
    }

    webpackConfig.module
      .rule('json')
      .test(/(.*)\.tr$/)
      .use('json-loader')
      .loader('json-loader')
      .end();

    webpackConfig.module.rules.delete('svg'); // 删除默认svg配置
    webpackConfig.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
      .end();

    if (IS_PRODUCTION) {
      webpackConfig.plugin('loadshReplace').use(new LodashModuleReplacementPlugin());
    }

    webpackConfig.plugin('html').tap((args) => {
      args[0].title = process.env.TITLE;
      return args;
    });
  },
});

/**
 * 初始化环境变量
 */
function getEnv() {
  const constants = config.constants;

  // 扩展内置变量
  for (const key in constants) {
    process.env[`VUE_APP_${key}`] = constants[key];
  }

  // 内置变量
  const vueVariables = ['NODE_ENV', 'BASE_URL'];
  const variableNames = [...vueVariables, 'SCENE'];
  const variables = [];

  for (const key in process.env) {
    if (key.startsWith('VUE_APP_')) {
      variableNames.push(key);
    }
  }

  variableNames.forEach((name) => {
    variables.push(`${name}: "${process.env[name]}"`);
  });

  return {
    variableNames,
    variables,
    // 用于 definePlugin
    define: variableNames
      .filter((name) => {
        return !name.startsWith('VUE_APP_') && !vueVariables.includes(name);
      })
      .reduce((prev, cur) => {
        prev[`process.env.${cur}`] = JSON.stringify(process.env[cur]);
        return prev;
      }, {}),
  };
}