实现 nacos + traefik，改了很多东西！！！

front-end/main-app/.env.development

@@ -0,0 +1,24 @@
+# Nacos 配置中心ip:端口
+VITE_NACOS_ADDRESS=192.168.31.101:8848
+
+# traefik 网关的地址
+VITE_TRAEFIK_ADDRESS=192.168.31.101
+
+# 注册到 Nacos 的服务名称（微前端模块名称）
+VITE_SERVER_NAME=main-app
+
+# 注册到 Nacos 的端口，也是前端运行的端口
+VITE_SERVER_PORT=1300
+
+
+#
+# 说明：项目要调用哪些 微前端 模块
+# 格式：VITE_MODEL_XXXX_NAME=微前端模块名称(模块 的 开发者提供)
+# 作用：通过名称从Nacos配置中心发现模块地址和端口，给 federation 实时加载
+#
+
+# product 商品模块
+VITE_MODEL_PRODUCT_NAME=app-product
+
+# shared 共享资源模块
+VITE_MODEL_SHARED_NAME=app-shared

front-end/main-app/.env.production

@@ -0,0 +1,21 @@
+# Nacos 配置中心ip:端口
+VITE_NACOS_ADDRESS=192.168.31.100:8848
+
+# 注册到 Nacos 的服务名称（微前端模块名称）
+VITE_SERVER_NAME=main-app
+
+# 注册到 Nacos 的端口，也是前端运行的端口
+VITE_SERVER_PORT=1300
+
+
+#
+# 说明：项目要调用哪些 微前端 模块
+# 格式：VITE_MODEL_XXXX_NAME=微前端模块名称(模块 的 开发者提供)
+# 作用：通过名称从Nacos配置中心发现模块地址和端口，给 federation 实时加载
+#
+
+# product 商品模块
+VITE_MODEL_PRODUCT_NAME=app-product
+
+# shared 共享资源模块
+VITE_MODEL_SHARED_NAME=app-shared

front-end/main-app/package.json

@@ -11,7 +11,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
-    "nacos-federation": "^1.0.2",
+    "nacos-federation": "link:../nacos-federation",
     "pinia": "^3.0.3",
     "vue": "^3.5.21",
     "vue-facing-decorator": "^4.0.1",

front-end/main-app/src/app/main.ts

@@ -4,12 +4,22 @@ import { createPinia } from 'pinia'
 import App from './App'
 import router from './router'
 
+// import { getNacosInstance } from '@shared/lib/nacosInstance';
+
 class Main {
     constructor() {
         createApp(App)
             .use(createPinia())
             .use(router)
             .mount('#app')
+
+        // this.test()
+    }
+
+    async test() {
+        // 关键：通过getNacosInstance获取实例（确保已初始化）
+        const nacos = await getNacosInstance();
+        console.log("product: ", await nacos.find('app-product'))
     }
 }
 

front-end/main-app/src/app/views/Home.tsx

@@ -27,10 +27,15 @@ export default class Home extends Vue {
         { id: 3, title: '新闻3' },
     ]
 
-    addCount() {
+    async created() {
+    }
+
+    async addCount() {
+        // console.log(await nacos.find('app-product'))
         // console.log("ref dom: ", this.refH1)
         // this.router.push({ name: 'about' })
         // this.route.query
+
         this.counter++
     }
 

front-end/main-app/src/shared/lib/nacosInstance.ts

@@ -0,0 +1,40 @@
+import { nacosServiceManage, RegisterOptions } from "nacos-federation"
+import { loadEnv } from 'vite';
+
+console.log("process.env.NODE_ENV: ", process.env.NODE_ENV)
+
+const env = loadEnv(
+    process.env.NODE_ENV || 'development', // 环境模式（development/production）
+    process.cwd() // 项目根目录（.env文件所在位置）
+);
+
+// 2. 定义配置（同步执行，无await）
+const nacosConfig: RegisterOptions = {
+    serverList: env.VITE_NACOS_ADDRESS,
+    serviceName: env.VITE_SERVER_NAME,
+    port: Number(env.VITE_SERVER_PORT),
+    namespace: env.VITE_NACOS_NAMESPACE || 'public'
+};
+
+// 3. 声明实例变量（先不初始化）
+let nacosInstance: nacosServiceManage | null = null;
+
+// 4. 提供初始化函数（显式调用，避免顶级await）
+export async function initNacosInstance() {
+    if (nacosInstance) {
+        return nacosInstance; // 已初始化则直接返回
+    }
+    // 首次调用时初始化
+    nacosInstance = await nacosServiceManage.create(nacosConfig);
+    console.log('Nacos 实例初始化完成');
+    return nacosInstance;
+}
+
+// 5. 提供获取实例的方法（确保初始化后使用）
+export async function getNacosInstance() {
+    if (!nacosInstance) {
+        // 若未初始化，先执行初始化
+        return await initNacosInstance();
+    }
+    return nacosInstance;
+}

front-end/main-app/src/shared/types/env.d.ts

@@ -1 +1,16 @@
 /// <reference types="vite/client" />
+
+interface ViteTypeOptions {
+    // 添加这行代码，你就可以将 ImportMetaEnv 的类型设为严格模式，
+    // 这样就不允许有未知的键值了。
+    // strictImportMetaEnv: unknown
+}
+
+interface ImportMetaEnv {
+    // readonly VITE_APP_TITLE: string
+    // 更多环境变量...
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}

front-end/main-app/tsconfig.json

@@ -14,7 +14,8 @@
     "lib": [
       "ES2020",
       "dom",
-      "dom.iterable"
+      "dom.iterable",
+      "WebWorker"
     ],
     "skipLibCheck": true,
     "paths": {

front-end/main-app/vite.config.ts

@@ -1,33 +1,44 @@
-import { fileURLToPath, URL } from 'node:url'
+import path from 'path'
 
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vueJsx from '@vue3-oop/plugin-vue-jsx'
 import federation from '@originjs/vite-plugin-federation';
 import { nacosServiceManage } from "nacos-federation";
 
+export default defineConfig(async ({ mode }) => {
+    const env = loadEnv(mode, process.cwd());
+    const nacos = await nacosServiceManage.create({
+        serverList: env.VITE_NACOS_ADDRESS,
+        serviceName: env.VITE_SERVER_NAME,
+        port: Number(env.VITE_SERVER_PORT)
+    });
 
-export default defineConfig(async () => {
-    const client = new nacosServiceManage({
-        serverList: '192.168.31.100:8848',
-        serviceName: 'main-app',
-        port: 1300
-    })
-    const productUrl = await client.find("app-product")
-    const sharedUrl = await client.find("app-shared")
+    // const productUrl = await nacos.find(env.VITE_MODEL_PRODUCT_NAME)
+    // const sharedUrl = await nacos.find(env.VITE_MODEL_SHARED_NAME)
 
     return {
         server: {
-            port: 1300,
+            port: Number(env.VITE_SERVER_PORT),
             host: '0.0.0.0',
             strictPort: true,
         },
         plugins: [
             vueJsx(),
             federation({
-                name: 'mainApp', // 主应用模块名（联邦模块需通过此名引用）
-                remotes: { // 配置远程联邦模块地址（开发/生产需对应）
-                    product: `${ productUrl }/assets/remoteEntry.js`,
-                    shared: `${ sharedUrl }/assets/remoteEntry.js`
+                name: env.VITE_SERVER_NAME,
+                remotes: {
+                    // 【弃用】基于 Nacos 服务发现获取 微前端模块的地址 192.168.31.101:1301
+                    // product: `${ productUrl }/assets/remoteEntry.js`,
+                    // shared: `${ sharedUrl }/assets/remoteEntry.js`
+
+                    // 实现：限流与熔断，重试，IP 白名单，压缩等
+                    // 基于 traefik 网关，由网关去寻找 微前端模块的地址
+                    // 网关的地址是 nodejs脚本 定时10秒访问Nacos api 后，生成Traefik配置文件dynamic.yml，
+                    // 并把配置实时同步到Traefik中，如果 xxx微前端模块停止运行那么就会从 Nacos服务中注销，
+                    // 那么dynamic.yml配置文件就会自动删减被下线的网关映射
+
+                    product: `http://${ env.VITE_TRAEFIK_ADDRESS }/${ env.VITE_MODEL_PRODUCT_NAME }/assets/remoteEntry.js`,
+                    shared: `http://${ env.VITE_TRAEFIK_ADDRESS }/${ env.VITE_MODEL_SHARED_NAME }/assets/remoteEntry.js`
                 },
                 shared: {
                     vue: { requiredVersion: '^3.5.18' },
@@ -48,10 +59,10 @@ export default defineConfig(async () => {
         },
         resolve: {
             alias: {
-                '@': fileURLToPath(new URL('./src/app/', import.meta.url)),
-                '@shared': fileURLToPath(new URL('./src/shared/', import.meta.url)),
-                '@features': fileURLToPath(new URL('./src/features/', import.meta.url)),
-                '@domains': fileURLToPath(new URL('./src/domains/', import.meta.url))
+                '@': path.resolve(__dirname, './src/app/'),
+                '@shared': path.resolve(__dirname, './src/shared/'),
+                '@features': path.resolve(__dirname, './src/features/'),
+                '@domains': path.resolve(__dirname, './src/domains/')
             },
         },
     }