首次提交

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>

remote/components/RemoteContactRouter.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <p>Label:{{ label }}</p>
     <component
       v-if="asyncPageComponent"
       :is="asyncPageComponent"

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();
+  }
+});

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: {

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"
   }
 }