首次提交

host/nuxt.config.ts

@@ -14,11 +14,17 @@ export default defineNuxtConfig({
   vite: {
     server: {
       proxy: {
-        "^/node_modules/.*": {
-          target: "http://localhost:3000",
+        // "^/node_modules/.*": {
+        //   target: "http://localhost:3000",
+        //   changeOrigin: true,
+        //   rewrite: (path) =>
+        //     path.replace(/^\/node_modules\//, "/_nuxt/node_modules/")
+        // },
+        "^/remote/*": {
+          target: "http://localhost:3005",
           changeOrigin: true,
           rewrite: (path) =>
-            path.replace(/^\/node_modules\//, "/_nuxt/node_modules/")
+            path.replace(/^\/remote\//, "")
         }
       }
     },

host/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
-    "dev": " nuxt dev",
+    "dev": " nuxt dev --host",
     "prebuild": "npm run clean",
     "pregenerate": "npm run clean",
     "generate": "nuxt generate",
@@ -15,15 +15,15 @@
     "serve": "serve .output/public -p 3000 --single"
   },
   "dependencies": {
-    "@pinia/nuxt": "^0.10.1",
-    "nuxt": "^3.15.4",
-    "pinia": "^2.3.0",
+    "@pinia/nuxt": "^0.11.2",
+    "nuxt": "^4.0.3",
+    "pinia": "^3.0.3",
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@originjs/vite-plugin-federation": "1.3.9",
+    "@originjs/vite-plugin-federation": "^1.4.1",
     "rimraf": "6",
     "serve": "~14.2.4",
-    "vite-plugin-top-level-await": "~1.5.0"
+    "vite-plugin-top-level-await": "^1.6.0"
   }
 }

host/pages/contact/[...all].vue

@@ -4,7 +4,7 @@
     <div class="grid grid-cols-1 gap-4">
       <Suspense>
         <template #default>
-          <RemoteContactRouter label="propsFromHost" @increment="handleLog" />
+          <RemoteContactRouter label="propsFromHost"  @increment="handleLog" />
         </template>
         <template #fallback>
           <div>Loading remote component...</div>
@@ -15,15 +15,41 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue"
+import {
+  __federation_method_getRemote as getRemote,
+  __federation_method_setRemote as setRemote,
+  __federation_method_unwrapDefault as unwrapModule,
+  type IRemoteConfig
+} from "virtual:__federation__";
 
-const handleLog = (value: number) => {
-  console.log("HOST: log increment", value)
-}
-const RemoteContactRouter = defineAsyncComponent(
-  // @ts-expect-error mfe
-  () => import("remote/RemoteContactRouter")
-)
+// 公共的 remote 配置
+const commonRemoteConfig: Partial<IRemoteConfig> = {
+  format: "esm", // 取决于你的 remoteEntry.js 构建方式
+  from: "vite"
+};
+
+const loadRemoteContactRouter = async () => {
+  // 运行时注册 remote
+  setRemote("remote", {
+    ...commonRemoteConfig,
+    url: "http://localhost:3003/remote/_nuxt/remoteEntry.js"
+  });
+
+  // 获取远程模块
+  const remoteModule = await getRemote("remote", "./RemoteContactRouter");
+
+  // 解包 default 导出。
+  // 如果远程模块是命名导出，例如 `export const RemoteContactRouter = ...`
+  // 那么你应该使用 `return remoteModule.RemoteContactRouter;`
+  return await unwrapModule(remoteModule);
+};
+
+// 3. 使用 defineAsyncComponent 来加载组件
+  const RemoteContactRouter = defineAsyncComponent(loadRemoteContactRouter);
+
+  const handleLog = (count: number) => {
+    console.log("count: ", count);
+  };
 </script>
 
 <style scoped></style>