在single-spa Web应用中运行多个Flutter实例的问题求助

1. 自定义Flutter Web全局命名空间隔离 #

Flutter Web默认会将dart、flutter相关全局对象挂载到window上，多个应用加载时会互相覆盖。可以通过编译配置为每个应用指定唯一命名空间：

• 修改每个Flutter项目的web/index.html，给加载main.dart.js的脚本添加自定义标识：

  <script src="main.dart.js" data-flutter-namespace="app1"></script>
  

• 在pubspec.yaml中添加Web编译配置，指定全局变量前缀：

  flutter:
    web:
      js_runtime:
        name: 'app1' # 每个应用使用不同命名，比如app2、app3
  

• 重新编译每个Flutter应用，此时全局变量会挂载到window.app1这类独立空间下，避免根对象冲突。

2. 增强single-spa沙箱隔离逻辑 #

single-spa的基础沙箱对Flutter这类重全局依赖的应用适配不足，需手动补充隔离逻辑：

• 注册子应用时通过customProps传递唯一标识，在mount阶段为当前应用的全局变量打标记：

  singleSpa.registerApplication({
    name: 'flutter-app1',
    app: () => import('@/assets/app1/main.dart.js'),
    activeWhen: ['/app1'],
    customProps: { appKey: 'app1' }
  });
  

• 在beforeUnmount钩子中，清理当前应用对应的全局变量和DOM节点，比如删除window.app1、移除#flutter-root容器，避免残留影响下一个应用加载。

3. 用Web Components封装实现完全隔离 #

将每个Flutter应用打包成独立的Web Component，借助Shadow DOM实现CSS和全局变量的完全隔离：

• 修改Flutter项目的main.dart，将应用挂载到自定义元素的Shadow DOM中：

  void main() {
    final customElement = document.createElement('flutter-app1');
    final shadowRoot = customElement.attachShadow({'mode': 'open'});
    // 创建Flutter根节点并挂载到Shadow DOM
    final flutterRoot = DivElement()..id = 'flutter-root';
    shadowRoot.append(flutterRoot);
    runApp(MyApp());
  }
  

• 编译后，主应用只需通过自定义标签<flutter-app1></flutter-app1>加载应用，Shadow DOM会自动隔离内部资源与外部环境。

4. 修复iframe方案的常见问题 #

如果之前iframe方案失败，排查以下关键点：

• 确保子应用的web/index.html中base标签的href配置正确，比如子应用部署在/app2路径下，需设置<base href="/app2/">，避免资源加载路径错误。
• 动态创建iframe时，合理配置sandbox属性，开启必要权限：

  const iframe = document.createElement('iframe');
  iframe.src = '/app2/index.html';
  iframe.sandbox = 'allow-scripts allow-same-origin allow-top-navigation';
  

• 通过postMessage实现主应用与iframe之间的路由同步，主应用跳转路由时向iframe发送消息，子应用监听消息并切换内部路由。

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