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

【重要】重构 并实现新的架构

Browse Source
This commit is contained in:
编码猿
2025-09-30 10:00:10 +08:00
parent 04754a1f77
commit a3ba6c2944
31 changed files with 459 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
front-end/main-app/.env.development
View File

@@ -1,11 +1,17 @@
# 请求协议 http or https（建议线上配置证书后，使用https）
VITE_PREFIX=http://
# Nacos 配置中心ip:端口
VITE_NACOS_ADDRESS=192.168.139.84:8848
#
# Nacos 集群的地址
# 注意：
# 1: 内网微前端模块，直接填内网Nacos IP:端口 就行
# 2: main-app位于公网，填 网关的公网地址
#
# 网关地址
VITE_NACOS_ADDRESS=nacos.ddd.com:80
# VITE_NACOS_ADDRESS=192.168.139.84:8848
# traefik 网关的地址
VITE_TRAEFIK_ADDRESS=192.168.31.101
# 注册到 Nacos 的服务名称（微前端模块名称）
VITE_SERVER_NAME=main-app
@@ -24,4 +30,4 @@ VITE_SERVER_PORT=1300
VITE_MODEL_PRODUCT_NAME=app-product
# shared 共享资源模块
VITE_MODEL_SHARED_NAME=app-shared
VITE_MODEL_SHARED_NAME=app-shared

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

@@ -1,8 +1,9 @@
# 请求协议 http or https（建议线上配置证书后，使用https）
VITE_PREFIX=http://
# Nacos 配置中心ip:端口
VITE_NACOS_ADDRESS=192.168.31.101:8848
# Nacos 配置中心 ip:端口 | 域名
VITE_NACOS_ADDRESS=cluster.nacos.com
#VITE_NACOS_ADDRESS=192.168.139.84:8848
# traefik 网关的地址
VITE_TRAEFIK_ADDRESS=192.168.31.101
@@ -24,4 +25,4 @@ VITE_SERVER_PORT=1300
VITE_MODEL_PRODUCT_NAME=app-product
# shared 共享资源模块
VITE_MODEL_SHARED_NAME=app-shared
VITE_MODEL_SHARED_NAME=app-shared

2
front-end/main-app/package.json
View File

@@ -11,8 +11,8 @@
"type-check": "vue-tsc --build"
},
"dependencies": {
"nacos-federation": "link:../nacos-federation",
"pinia": "^3.0.3",
"vite-plugin-nacos": "link:../vite-plugin-nacos",
"vue": "^3.5.21",
"vue-facing-decorator": "^4.0.1",
"vue-router": "^4.5.1"

5
front-end/main-app/src/app/main.ts
View File

@@ -11,10 +11,11 @@ class Main {
const app = createApp(App)
app.use(createPinia())
.use(router)
.mount('#app')
.use(router)
.mount('#app')
// TODO 需要解决的地方
console.log("import.meta.env: ", import.meta.env)
window.__APP_CONFIG__ = import.meta.env;
elementPlus.init(app)

42
front-end/main-app/vite.config.ts
View File

@@ -1,45 +1,22 @@
import path from 'path'
import { defineConfig, loadEnv } from 'vite'
import { defineConfig, loadEnv, ConfigEnv, mergeConfig } from 'vite'
import vueJsx from '@vue3-oop/plugin-vue-jsx'
import federation from '@originjs/vite-plugin-federation';
import { nacosRegVitePlugin } from "nacos-federation";
import { reg, init } from 'vite-plugin-nacos';
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig(async ({ mode }) => {
const env = loadEnv(mode, process.cwd());
// const nacos-cluster = await nacosServiceManage.create({
// serverList: env.VITE_NACOS_ADDRESS,
// serviceName: env.VITE_SERVER_NAME,
// port: Number(env.VITE_SERVER_PORT)
// });
// const productUrl = await nacos-cluster.find(env.VITE_MODEL_PRODUCT_NAME)
// const sharedUrl = await nacos-cluster.find(env.VITE_MODEL_SHARED_NAME)
export default defineConfig(async (config: ConfigEnv) => {
const env = loadEnv(config.mode, process.cwd());
return {
server: {
port: Number(env.VITE_SERVER_PORT),
host: '::',
strictPort: true,
},
return mergeConfig({
plugins: [
nacosRegVitePlugin(),
vueJsx(),
reg(),
federation({
name: env.VITE_SERVER_NAME,
remotes: {
// 【弃用】基于 Nacos 服务发现获取 微前端模块的地址 192.168.31.101:1301
// product: `${ productUrl }/assets/remoteEntry.js`,
// shared: `${ sharedUrl }/assets/remoteEntry.js`
// 实现：限流与熔断，重试，IP 白名单，压缩等
// 基于 c 网关，由网关去寻找 微前端模块的地址
// 网关的地址是 nodejs脚本 定时10秒访问Nacos api 后，生成Traefik配置文件dynamic.yml，
// 并把配置实时同步到Traefik中，如果 xxx微前端模块停止运行那么就会从 Nacos服务中注销，
// 那么dynamic.yml配置文件就会自动删减被下线的网关映射
product: `${ env.VITE_PREFIX }${ env.VITE_TRAEFIK_ADDRESS }/${ env.VITE_MODEL_PRODUCT_NAME }/assets/remoteEntry.js`,
shared: `${ env.VITE_PREFIX }${ env.VITE_TRAEFIK_ADDRESS }/${ env.VITE_MODEL_SHARED_NAME }/assets/remoteEntry.js`
product: `${env.VITE_PREFIX}${env.VITE_NACOS_ADDRESS}/${env.VITE_MODEL_PRODUCT_NAME}/assets/remoteEntry.js`,
shared: `${env.VITE_PREFIX}${env.VITE_NACOS_ADDRESS}/${env.VITE_MODEL_SHARED_NAME}/assets/remoteEntry.js`
},
shared: {
vue: { requiredVersion: '^3.5.18' },
@@ -47,6 +24,7 @@ export default defineConfig(async ({ mode }) => {
pinia: { requiredVersion: '^3.0.3' }
}
}),
vueJsx(),
visualizer({
title: "主应用依赖分析",
filename: 'dist/stats.html', // 分析文件输出路径
@@ -73,5 +51,5 @@ export default defineConfig(async ({ mode }) => {
'@domains': path.resolve(__dirname, './src/domains/')
},
},
}
}, await init(env))
})