首次提交

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>