feat: 新增模块联邦

build/rsbuild-plugins.ts

 /*
  * @Author: zengzhe
  * @Date: 2024-12-27 11:54:24
- * @LastEditors: zengzhe
- * @LastEditTime: 2024-12-27 17:00:00
+ * @LastEditors: xiejiang
+ * @LastEditTime: 2025-02-04 17:52:39
  * @Description:
  */
 import { pluginBabel } from '@rsbuild/plugin-babel'
@@ -56,6 +56,20 @@ export const createPlugins = () => {
           })
         ]
       }
+    },
+    moduleFederation: {
+      options: {
+        name: 'web-',
+        remotes: {
+          remote: 'remote@http://localhost:5174/remoteEntry.js'
+        },
+        shared: {
+          vue: {
+            eager: true,
+            singleton: true
+          }
+        }
+      }
     }
   }
 }

rsbuild.config.ts

 /*
  * @Author: zengzhe
  * @Date: 2024-12-27 11:48:34
- * @LastEditors: zengzhe
- * @LastEditTime: 2024-12-27 17:00:41
+ * @LastEditors: xiejiang
+ * @LastEditTime: 2025-02-04 17:45:08
  * @Description:
  */
 import { resolve } from 'path'
@@ -43,6 +43,7 @@ export default defineConfig({
   },
   plugins: createPlugins().plugins,
   tools: createPlugins().tools,
+  moduleFederation: createPlugins().moduleFederation,
   performance: {
     removeConsole: true
   }

src/routers/modules/basicRouter.ts

@@ -2,7 +2,7 @@
  * @Author: xiejiang
  * @Date: 2024-11-11 09:38:40
  * @LastEditors: xiejiang
- * @LastEditTime: 2024-11-28 15:38:43
+ * @LastEditTime: 2025-02-04 16:38:04
  * @Description:
  * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
  */

src/typings/global.d.ts

@@ -21,6 +21,8 @@ declare namespace JSX {
   }
 }
 
+declare module 'remote/*'
+
 /* Menu */
 declare namespace Menu {
   interface MenuOptions {

src/views/home/index.vue

@@ -2,15 +2,12 @@
  * @Author: xiejiang
  * @Date: 2024-11-05 10:14:56
  * @LastEditors: xiejiang
- * @LastEditTime: 2024-12-11 18:47:47
+ * @LastEditTime: 2025-02-04 17:19:13
  * @Description: 首页
  * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
 -->
 <template>
-  <div class="home w-full h-full">
-    <!-- <div class="home-nav-bag w-full flex justify-center">
-      <div></div>
-    </div> -->
+  <!-- <div class="home w-full h-full">
     <div class="home-avatar flex items-center justify-center">
       <div class="text-center">
         <p class="text-[20px] bold">{{ userInfo && userInfo.userName }}，您好！</p>
@@ -39,15 +36,18 @@
       </p>
     </div>
     <img :src="homeImg" class="mt-[80px]" width="502" alt="" />
-  </div>
+  </div> -->
+  <RemoteButton />
 </template>
 
 <script setup lang="ts" name="home">
-import { useUserStore } from '@/stores/modules/user'
+// import { useUserStore } from '@/stores/modules/user'
 import { useBasic } from '@/hooks/useBasic'
-import homeImg from '@/assets/images/home-img.png'
-const userStore = useUserStore()
-const userInfo = computed(() => userStore.userInfo)
+// import homeImg from '@/assets/images/home-img.png'
+// const userStore = useUserStore()
+// const userInfo = computed(() => userStore.userInfo)
+
+const RemoteButton = defineAsyncComponent(() => import('remote/home'))
 
 const { setMenuSign } = useBasic()