接入vue3子应用

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
+.idea
 *.local
 .DS_Store

src/App.vue

@@ -7,6 +7,7 @@
       <nav class="nav-links">
         <router-link to="/home">首页</router-link>
         <router-link to="/child-app">Vue2 子应用</router-link>
+        <router-link to="/vue3-app">Vue3 子应用</router-link>
       </nav>
     </header>
     <main class="app-main">

src/config/subApps.ts

@@ -40,6 +40,15 @@ export const subApps: SubAppConfig[] = [
     iframe: true,
     keepAlive: true,
     routerMode: 'native'
+  },
+  {
+    name: 'vue3-app',
+    url: 'http://localhost:3001/',
+    baseroute: '/vue3-app',
+    // Vite 子应用必须开启 iframe 沙箱
+    iframe: true,
+    keepAlive: true,
+    routerMode: 'native'
   }
 ]
 

src/router/index.ts

@@ -10,12 +10,23 @@ const routes = [
     name: 'home',
     component: () => import('@/views/Home.vue')
   },
+  {
+    path: '/about',
+    name: 'about',
+    component: () => import('@/views/About.vue')
+  },
   {
     // 子应用路由 — `:page*` 通配符匹配子应用内部所有路由
     // 例如：/child-app、/child-app/page1、/child-app/page2/xxx
     path: '/child-app/:page*',
     name: 'childApp',
     component: () => import('@/views/ChildApp.vue')
+  },
+  {
+    // Vue3 子应用路由
+    path: '/vue3-app/:page*',
+    name: 'vue3App',
+    component: () => import('@/views/ChildApp.vue')
   }
 ]
 

src/views/About.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<div>主应用的about</div>
+</template>
+
+<style scoped>
+
+</style>