样式冲突问题模板

src/config/subApps.ts

@@ -32,11 +32,10 @@ export interface SubAppConfig {
 export const subApps: SubAppConfig[] = [
   {
     name: 'vue2-app',
-    // TODO: 替换为你的 Vue 2 子应用实际地址
     url: 'http://localhost:5173/',
     baseroute: '/child-app',
-    // Vite 子应用必须开启 iframe 模式
-    // （with 沙箱的 new Function() 不支持 ES Module 的 import/export 语法）
+    // Vite 子应用必须开启 iframe 沙箱
+    // my-vue2-app 虽然是 Vue 2，但用 Vite 构建，输出 ES Module
     iframe: true,
     keepAlive: true,
     routerMode: 'native'
@@ -49,6 +48,35 @@ export const subApps: SubAppConfig[] = [
     iframe: true,
     keepAlive: true,
     routerMode: 'native'
+  },
+  {
+    name: 'mock-app',
+    url: 'http://localhost:5174/',
+    baseroute: '/mock-app',
+    // ============================================
+    // ⚠️ 样式冲突演示专用：
+    // iframe: false → 子应用 DOM 直接嵌入主文档
+    // disableScopecss: true → 关闭样式隔离，双方样式互相泄漏
+    // 这是一个纯 HTML 页面（无 JS 框架），不需要 ES Module 支持
+    // ============================================
+    iframe: false,
+    disableScopecss: true,
+    keepAlive: true,
+    routerMode: 'native'
+  },
+  {
+    name: 'mock-app-2',
+    url: 'http://localhost:5175/',
+    baseroute: '/mock-app-2',
+    // ============================================
+    // ⚠️ 子应用间样式冲突演示：
+    // 与 mock-app 相同：iframe: false, disableScopecss: true
+    // 用于验证：前一个子应用的样式是否会影响后一个子应用
+    // ============================================
+    iframe: false,
+    disableScopecss: true,
+    keepAlive: true,
+    routerMode: 'native'
   }
 ]