子应用接入步骤

总体接入步骤

1. 安装@das-fed/mframe
2. 修改单页应用的挂载点

完成以上步骤即可完成接入。

1. 安装@das-fed/mframe

pnpm add @das-fed/mframe

2. 修改SPA应用的挂载点

2.1 子应用是vue时

原应用的mian.ts代码最小化代码假设如下：

import { createApp } from 'vue'
import { router } from './router'
import App from './App.vue'

const app = createApp(App)
app.use(router)
app.mount('#app')

需要改为：

import { createApp } from 'vue'
import { router } from './router'
import App from './App.vue'
import { createMicroApp } from '@das-fed/mframe' // 引入框架依赖

const app = createApp(App)
app.use(router)

// 使用mframe创建子应用，并修改原spa应用的挂载点
createMicroApp().then(res=>{
  app.mount(res.mountDom!)
})

独立运行且使用 upf-ui 时，mframe 会默认启用 upf-ui 主题兜底；mframe 只写入运行时标记，真正注入由 @das-fed/upf-ui/packages/global/theme 暴露的 ensureDefaultThemeStyle() 完成。该能力只在独立窗口、没有宿主主题快照且页面实际加载 upf-ui 时生效；未指定兜底预设时，会优先读取 data-theme/data-skin 与 localStorage.upf-theme-config 中保存的当前主题，仍缺失再使用 default。兜底 style 固定插到 head 最前面；手动引入 @das-fed/upf-ui/dist/presets/theme-*.css 会覆盖或跳过自动兜底，运行时主题变量优先级最高。可通过配置关闭或指定兜底预设：

createMicroApp({
  upfUiThemeFallback: false,
})

createMicroApp({
  upfUiThemeFallback: { presetName: 'dkh' },
})

createMicroApp({
  upfUiThemeFallback: { storageKey: 'upf-theme-config' },
})

2.2 主应用是react时

建设中...

2.3 主应用是angular时

建设中...

主应用接入步骤

总体接入步骤

1. 安装@das-fed/mframe
2. 修改单页应用的挂载点和布局组件的挂载点

完成以上步骤即可完成接入。

1. 安装@das-fed/mframe

pnpm add @das-fed/mframe

2. 修改SPA应用的挂载点和布局组件的挂载点

2.1 主应用是vue时

原应用的mian.ts代码最小化代码假设如下：

import { createApp } from 'vue'
import { router } from './router'
import App from './App.vue'

const app = createApp(App)
app.use(router)
app.mount('#app')

需要改为：

import { createApp, h, render } from 'vue'
import { router } from './router'
import App from './App.vue'
import { createMicroApp } from '@das-fed/mframe' // 引入框架依赖
import Nav from './layout-components/nav.vue' // 引入布局组件中的顶部导航组件
import Menu from './layout-components/menu.vue' // 引入布局组件中的左侧菜单组件
import Tab from './layout-components/tab.vue' // 引入布局组件中的标签栏组件

const app = createApp(App)
app.use(router)

// 使用mframe创建子应用，并修改原spa应用的挂载点
createMicroApp({
  // 子应用列表
  microApps: [
    {
      name: 'app1',
      origin: 'http://localhost:5174',
      activeRule: '/micro-app-1/*',
    },
    {
      name: 'app2',
      origin: 'http://localhost:5175',
      activeRule: '/micro-app-2/*',
      router: { mode: 'hash' },
    },
  ],
}).then(res => {
  const { mountDom, navDom, menuDom, tabDom } = res
  app.mount(res.mountDom!) // 修改应用的挂载点
  render(h(Nav), navDom!) // 修改布局组件中的顶部导航组件的挂载点
  render(h(Menu), menuDom!) // 修改布局组件中的左侧菜单组件的挂载点
  render(h(Tab), tabDom!) // 修改布局组件中的标签栏组件的挂载点
})

2.2 主应用是react时

建设中...

2.3 主应用是angular时

建设中...

3. 渲染外框组件（顶部nav、左侧menu、导航tab）

建设中...

4. 加载子应用

建设中...

5. 共享 iframe 逻辑子应用识别

当一个顶层 microApps[].name 复用同一个 iframe 承载多个路由前缀时，可以通过 logicalApps 显式声明 iframe 内的逻辑子应用：

createMainApp({
  microApps: [
    {
      name: 'enterpriseadmin',
      origin: '/enterpriseadmin/',
      activeRule: ['/enterpriseadmin/**', '/iot/**'],
      logicalApps: [
        { key: 'enterpriseadmin/ism', rulePrefix: '/enterpriseadmin/ism' },
        { key: 'iot/iot', rulePrefix: '/iot', runtimeRoutePrefix: '/iot/iot' },
        { key: 'enterpriseadmin', rulePrefix: '/enterpriseadmin' },
      ],
      devSharedIframeMultiPrefix: true,
    },
  ],
})

识别优先级：

1. 显式 logicalApps
2. upf createDasWebApp.microAppName / microApps[].microAppName 运行时注册
3. 原有 activeRule 前缀推断

显式 logicalApps 是权威配置；如果某项写错但仍能命中，会覆盖运行时兜底。runtimeRoutePrefix 只用于开发态共享 iframe 多前缀调试，运行时 microAppName 不会自动推导这类路径映射。