bmy/DDDMicroFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改 nacos-federation 插件，实现 接口请求基地址从 配置中心获取，并注入到环境变量中

Browse Source
This commit is contained in:
编码猿
2025-09-23 03:26:10 +08:00
parent cbc2c25cf4
commit 84c4e8bdc7
22 changed files with 363 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
front-end/app-product/.env.development
View File

@@ -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=app-product
# 注册到 Nacos 的端口，也是前端运行的端口
VITE_SERVER_PORT=1301
#
# 说明：项目要调用哪些 微前端 模块
# 格式：VITE_MODEL_XXXX_NAME=微前端模块名称(模块 的 开发者提供)
# 作用：通过名称从Nacos配置中心发现模块地址和端口，给 federation 实时加载
#
# shared 共享资源模块
VITE_MODEL_SHARED_NAME=app-shared

5
front-end/app-product/.env.production
View File

@@ -18,4 +18,7 @@ VITE_SERVER_PORT=1301
#
# shared 共享资源模块
VITE_MODEL_SHARED_NAME=app-shared
VITE_MODEL_SHARED_NAME=app-shared

2
front-end/app-product/src/App.tsx
View File

@@ -1,4 +1,4 @@
import {defineComponent} from 'vue'
import { defineComponent } from 'vue'
export default defineComponent({
setup() {

1
front-end/app-product/src/features/product/router/index.ts
View File

@@ -1,6 +1,5 @@
import { RouteRecordRaw } from 'vue-router';
export const productRouter: Array<RouteRecordRaw> = [
{
path: '/Products',

18
front-end/app-product/src/features/product/views/ProductDetail.tsx
View File

@@ -1,7 +1,7 @@
import {product} from '@domains/product/di/productModule';
import {ProductType} from '@domains/product/domain/type/ProductType';
import {defineComponent, onMounted, reactive} from 'vue'
import {useRoute} from 'vue-router'
import { product } from '@domains/product/di/productModule';
import { ProductType } from '@domains/product/domain/type/ProductType';
import { defineComponent, onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'
interface storeType {
item: ProductType
@@ -36,13 +36,13 @@ export default defineComponent({
return () => (
<div class="ProductDetail">
<h1>商品领域模块 - 商品详情页面</h1>
<hr />
<p>商品id：{state.id}</p>
{state.item.name}
<hr/>
<p>商品id：{ state.id }</p>
{ state.item.name }
<ul>
{
Object.entries(state.item).map(([key, value]) =>
<li>{key}: {value}</li>
Object.entries(state.item).map(([ key, value ]) =>
<li>{ key }: { value }</li>
)
}
</ul>

16
front-end/app-product/src/features/product/views/ProductList.tsx
View File

@@ -1,7 +1,7 @@
import {defineComponent, onMounted, reactive} from 'vue'
import {useRouter} from 'vue-router';
import {product} from '@domains/product/di/productModule';
import {ProductType} from '@domains/product/domain/type/ProductType';
import { defineComponent, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router';
import { product } from '@domains/product/di/productModule';
import { ProductType } from '@domains/product/domain/type/ProductType';
interface storeType {
list: Array<ProductType>
@@ -30,18 +30,18 @@ export default defineComponent({
return () => (
<div class="ProductList">
<h1>商品领域模块 - 商品列表页面3</h1>
<hr />
<hr/>
<h2>从Deno 后端 加载的数据，点击进详情</h2>
<ul>
{
state.list.map(item =>
<li key={item.id} onClick={() => {
<li key={ item.id } onClick={ () => {
router.push({
name: 'ProductDetail',
query: { id: item.id }
});
}}>
{item.id} | {item.name} | ¥{item.price}
} }>
{ item.id } | { item.name } | ¥{ item.price }
</li>
)
}

11
front-end/app-shared/.env.development
View File

@@ -0,0 +1,11 @@
# Nacos 配置中心ip:端口
VITE_NACOS_ADDRESS=192.168.31.101:8848
# traefik 网关的地址
VITE_TRAEFIK_ADDRESS=192.168.31.101
# 注册到 Nacos 的服务名称（微前端模块名称）
VITE_SERVER_NAME=app-shared
# 注册到 Nacos 的端口，也是前端运行的端口
VITE_SERVER_PORT=1333

3
front-end/app-shared/.env.production
View File

@@ -1,6 +1,9 @@
# Nacos 配置中心ip:端口
VITE_NACOS_ADDRESS=192.168.31.101:8848
# traefik 网关的地址
VITE_TRAEFIK_ADDRESS=192.168.31.101
# 注册到 Nacos 的服务名称（微前端模块名称）
VITE_SERVER_NAME=app-shared

1
front-end/app-shared/package.json
View File

@@ -17,6 +17,7 @@
"nacos-federation": "link:../nacos-federation"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.1",
"@originjs/vite-plugin-federation": "^1.4.1",
"typescript": "~5.8.3",
"vite": "^7.1.6"

8
front-end/app-shared/src/config/HttpConfig.ts
View File

@@ -1,5 +1,9 @@
export class HttpConfig {
public static DevBaseUrl: string = "http://127.0.0.1:3210/api"
public static prodBaseUrl: string = "http://127.0.0.1:3210/api/"
// public static DevBaseUrl: string = "http://127.0.0.1:3210/api"
public static DevBaseUrl: string = import.meta.env.VITE_DEVBASEURL
// public static ProdBaseUrl: string = "http://127.0.0.1:3210/api/"
public static ProdBaseUrl: string = import.meta.env.VITE_PRODBASEURL
public static apiList: string = ""
}

22
front-end/app-shared/src/infra/AxiosInfra.ts
View File

@@ -1,5 +1,5 @@
import axios, {AxiosError, type AxiosInstance, type AxiosRequestConfig} from "axios";
import {UrlCheckUtils} from '../utils/index'
import axios, { AxiosError, type AxiosInstance, type AxiosRequestConfig } from "axios";
import { UrlCheckUtils } from '../utils/index'
class AxiosInfra {
@@ -32,7 +32,7 @@ class AxiosInfra {
/**
* Put 请求
* 请求参数请参考接口：RequestParams
* 请求参数请参考接口：RequestParams
* @param params
*/
public async put(params: AxiosRequestConfig): Promise<any> {
@@ -41,7 +41,7 @@ class AxiosInfra {
/**
* delete 请求
* 请求参数请参考接口：RequestParams
* 请求参数请参考接口：RequestParams
* @param params
*/
public async delete(params: AxiosRequestConfig): Promise<any> {
@@ -60,16 +60,16 @@ class AxiosInfra {
(error: AxiosError) => {
console.log(`
❌ 请求错误 ❌
1、基地址: ${error.config?.baseURL}
2、短地址: ${error.config?.url}
3、请求 方式: ${error.config?.method}
4、请求 参数: ${JSON.stringify(error.config?.params)}
5、请求 头 : ${JSON.stringify(error.config?.headers)}
1、基地址: ${ error.config?.baseURL }
2、短地址: ${ error.config?.url }
3、请求 方式: ${ error.config?.method }
4、请求 参数: ${ JSON.stringify(error.config?.params) }
5、请求 头 : ${ JSON.stringify(error.config?.headers) }
------------------------------------------------------------
6、错误信息为: ${error.message}
7、错误代码为: ${error.stack}
6、错误信息为: ${ error.message }
7、错误代码为: ${ error.stack }
`);
return Promise.reject(error)
})

4
front-end/app-shared/src/utils/UrlCheckUtils.ts
View File

@@ -1,10 +1,10 @@
import {HttpConfig} from '../config'
import { HttpConfig } from '../config'
export class UrlCheckUtils {
public static check() {
if (import.meta.env.MODE === 'production') {
return HttpConfig.prodBaseUrl;
return HttpConfig.ProdBaseUrl;
} else {
return HttpConfig.DevBaseUrl;
}

5
front-end/app-shared/vite.config.ts
View File

@@ -1,6 +1,8 @@
import { defineConfig, loadEnv, UserConfig } from 'vite'
import federation from "@originjs/vite-plugin-federation";
import { nacosRegVitePlugin } from "nacos-federation";
// @ts-ignore
import vue from '@vitejs/plugin-vue';
export default defineConfig(async ({ mode }): Promise<UserConfig> => {
const env = loadEnv(mode, process.cwd());
@@ -25,7 +27,8 @@ export default defineConfig(async ({ mode }): Promise<UserConfig> => {
shared: {
axios: { requiredVersion: '^1.12.2' }
}
})
}),
vue()
],
build: {
target: 'esnext',

5
front-end/main-app/.env.production
View File

@@ -1,5 +1,8 @@
# Nacos 配置中心ip:端口
VITE_NACOS_ADDRESS=192.168.31.100:8848
VITE_NACOS_ADDRESS=192.168.31.101:8848
# traefik 网关的地址
VITE_TRAEFIK_ADDRESS=192.168.31.101
# 注册到 Nacos 的服务名称（微前端模块名称）
VITE_SERVER_NAME=main-app

1
front-end/main-app/src/app/views/Home.tsx
View File

@@ -36,6 +36,7 @@ export default class Home extends Vue {
// this.router.push({ name: 'about' })
// this.route.query
this.counter++
}

27
front-end/nacos-federation/src/vite-plugin-nacos.ts
View File

@@ -1,4 +1,4 @@
import { Plugin, ResolvedConfig } from 'vite';
import { Plugin } from 'vite';
import { nacosServiceManage, RegisterOptions } from './nacosServiceManage';
export function nacosRegVitePlugin(options?: Partial<RegisterOptions>): Plugin {
@@ -6,11 +6,19 @@ export function nacosRegVitePlugin(options?: Partial<RegisterOptions>): Plugin {
return {
name: 'vite-plugin-nacos',
async configResolved(config: ResolvedConfig) {
async configResolved(config) {
// 安全检查：确保 config.define 存在
if (!config.define) {
// @ts-ignore
config.define = {};
}
console.log("config.define: ", config.define)
// 从环境变量和配置中获取Nacos配置（环境变量优先级更高）
const env = config.env;
console.log("you env: ", env)
const registerOptions: RegisterOptions = {
serverList: env.VITE_NACOS_ADDRESS || options?.serverList!,
serviceName: env.VITE_SERVER_NAME || options?.serviceName!,
@@ -33,6 +41,19 @@ export function nacosRegVitePlugin(options?: Partial<RegisterOptions>): Plugin {
// 初始化Nacos实例
nacosInstance = await nacosServiceManage.create(registerOptions);
const baseUrl = await nacosInstance.configClient.getConfig("baseUrl", "DEFAULT_GROUP")
const baseUrlConfig = baseUrl ? JSON.parse(baseUrl) : {};
console.log("[vite-plugin-nacos] 从Nacos配置发现获得接口地址: ", baseUrlConfig)
const customizeEnv: Record<string, string> = {};
Object.keys(baseUrlConfig).forEach(key => {
const envKey = `import.meta.env.VITE_${ key.toUpperCase() }`;
customizeEnv[envKey] = JSON.stringify(baseUrlConfig[key]);
});
// @ts-ignore
Object.assign(config.define, customizeEnv);
},
async closeBundle() {
// // 服务关闭时注销Nacos实例