如何在React应用的single-spa-router中动态配置Base URL

步骤1：配置环境变量 #

在项目根目录的.env文件中添加Base URL变量（变量名必须以REACT_APP_开头，Create React App才会自动暴露给模板）：

REACT_APP_BASE_PATH=/your-base-path

本地开发时需要重启React开发服务，让新的环境变量生效。

步骤2：通过index.ejs动态设置base属性 #

纯HTML无法直接读取环境变量，可通过以下两种方式实现需求：

方案一：将layout内容整合到index.ejs

把microfrontend-layout.html的内容直接移到index.ejs中，用EJS语法直接替换base属性的值：

<% if (isLocal) { %>
<script type="systemjs-importmap">
  {
    "imports": {
        "@root-config": "HTTP://someurl",
        "@login": "someurl",
        "@dasboard": "someurl"
    }
}
</script>
<% } %>

<single-spa-router base="<%= process.env.REACT_APP_BASE_PATH || '/' %>"> 
  <main style="display: flex; justify-content: center;">
    <route default>
      <h1>404 route not defined</h1>
    </route>

    <route path="/login">
          <application name="@login"></application>
    </route>

    <route path="/dashboard">
          <application name="@dashboard"></application>
    </route>
</main>
</single-spa-router>

方案二：动态修改DOM属性（保留独立layout文件）

如果需要保留microfrontend-layout.html作为独立文件，在index.ejs中添加脚本，待DOM加载完成后动态设置base属性：

1. 修改microfrontend-layout.html中的single-spa-router初始base为空：

<single-spa-router base=""> 
  <!-- 原有内容不变 -->
</single-spa-router>

2. 在index.ejs中添加脚本：

<% if (isLocal) { %>
<script type="systemjs-importmap">
  {
    "imports": {
        "@root-config": "HTTP://someurl",
        "@login": "someurl",
        "@dasboard": "someurl"
    }
}
</script>
<% } %>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const routerEl = document.querySelector('single-spa-router');
  if (routerEl) {
    routerEl.setAttribute('base', '<%= process.env.REACT_APP_BASE_PATH || '/' %>');
  }
});
</script>

注意事项 #

如果项目不是使用Create React App，需要确保构建工具（如Webpack）将环境变量注入到EJS模板中，可通过webpack.DefinePlugin配置：

// webpack.config.js
const webpack = require('webpack');
require('dotenv').config();

module.exports = {
  // 其他配置
  plugins: [
    new webpack.DefinePlugin({
      'process.env.REACT_APP_BASE_PATH': JSON.stringify(process.env.REACT_APP_BASE_PATH)
    })
  ]
};

内容的提问来源于stack exchange，提问作者user2613946