From 9341e4659411b0b640e72c5ffa2e127aefa3746b Mon Sep 17 00:00:00 2001
From: wangbo <wangbolhr@163.com>
Date: Thu, 14 Aug 2025 09:14:55 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E6=AC=A1=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 host/nuxt.config.ts                       | 12 +++++--
 host/package.json                         | 12 +++----
 host/pages/contact/[...all].vue           | 44 ++++++++++++++++++-----
 remote/components/RemoteContactRouter.vue |  1 +
 remote/middleware/core.ts                 | 17 +++++++++
 remote/nuxt.config.ts                     |  8 +++--
 remote/package.json                       | 14 ++++----
 7 files changed, 80 insertions(+), 28 deletions(-)
 create mode 100644 remote/middleware/core.ts

diff --git a/host/nuxt.config.ts b/host/nuxt.config.ts
index 1f3a291..51f9a69 100644
--- a/host/nuxt.config.ts
+++ b/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\//, "")
         }
       }
     },
diff --git a/host/package.json b/host/package.json
index 6cc4ed3..5517d7a 100644
--- a/host/package.json
+++ b/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"
   }
 }
diff --git a/host/pages/contact/[...all].vue b/host/pages/contact/[...all].vue
index dd2d71c..cb76233 100644
--- a/host/pages/contact/[...all].vue
+++ b/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>
diff --git a/remote/components/RemoteContactRouter.vue b/remote/components/RemoteContactRouter.vue
index a6d7b8f..86ca8ef 100644
--- a/remote/components/RemoteContactRouter.vue
+++ b/remote/components/RemoteContactRouter.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <p>Label:{{ label }}</p>
     <component
       v-if="asyncPageComponent"
       :is="asyncPageComponent"
diff --git a/remote/middleware/core.ts b/remote/middleware/core.ts
new file mode 100644
index 0000000..a3a6470
--- /dev/null
+++ b/remote/middleware/core.ts
@@ -0,0 +1,17 @@
+
+export default defineEventHandler((event) => {
+  const allowedOrigin = 'http://localhost:3003'; // 替换为你的前端项目域名
+
+
+  console.log('event', event)
+  // 设置 CORS 响应头，允许来自特定源的请求
+  event.node.res.setHeader('Access-Control-Allow-Origin', allowedOrigin);
+  event.node.res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+  event.node.res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+
+  // 如果请求是预检请求 (OPTIONS)，则直接返回 204
+  if (event.node.req.method === 'OPTIONS') {
+    event.node.res.writeHead(204);
+    event.node.res.end();
+  }
+});
\ No newline at end of file
diff --git a/remote/nuxt.config.ts b/remote/nuxt.config.ts
index 7e3ce55..e415bc9 100644
--- a/remote/nuxt.config.ts
+++ b/remote/nuxt.config.ts
@@ -5,11 +5,12 @@ import topLevelAwait from "vite-plugin-top-level-await"
 export default defineNuxtConfig({
   compatibilityDate: "2024-04-03",
   devtools: { enabled: false },
-  ssr: false,
+  ssr: true,
   nitro: {
-    preset: "static"
+    // preset: "static",
   },
   vite: {
+
     $client: {
       base: "/",
       plugins: [
@@ -28,7 +29,8 @@ export default defineNuxtConfig({
       ]
     },
     $server: {
-      plugins: []
+      plugins: [
+      ],
     }
 
     // build: {
diff --git a/remote/package.json b/remote/package.json
index 1397792..0bee3c8 100644
--- a/remote/package.json
+++ b/remote/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
-    "dev": "HOST=0.0.0.0 PORT=3001 nuxt dev",
+    "dev": "nuxt dev --host",
     "prebuild": "npm run clean",
     "pregenerate": "npm run clean",
     "generate": "nuxt generate",
@@ -12,18 +12,18 @@
     "postinstall": "nuxt prepare",
     "clean": "rimraf .output dist",
     "clean2": "rimraf --glob node_modules",
-    "serve": "serve .output/public -p 3001 --cors --single"
+    "serve": "PORT=3005 node .output/server/index.mjs  --cors --single"
   },
   "dependencies": {
-    "@pinia/nuxt": "^0.9.0",
-    "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"
   }
 }