89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
/**
|
||
* 子应用配置列表
|
||
*
|
||
* 后续对接 Vue 2 子应用时，在此处添加/修改配置即可
|
||
*
|
||
* @see https://jd-opensource.github.io/micro-app/docs.html#/configure
|
||
*/
|
||
export interface SubAppConfig {
|
||
/** 应用名称，全局唯一，字母开头 */
|
||
name: string
|
||
/** 子应用地址（开发环境填写 devServer 地址） */
|
||
url: string
|
||
/** 基座分配给子应用的路由前缀 */
|
||
baseroute: string
|
||
/** 是否使用 iframe 沙箱（Vite 子应用必须开启；Webpack 子应用可选） */
|
||
iframe?: boolean
|
||
/** 是否保活子应用，避免重复加载 */
|
||
keepAlive?: boolean
|
||
/** 路由模式：native | native-scope */
|
||
routerMode?: 'native' | 'native-scope'
|
||
/** 是否禁用样式隔离 */
|
||
disableScopecss?: boolean
|
||
/** 是否禁用沙箱 */
|
||
disableSandbox?: boolean
|
||
}
|
||
|
||
// ============================================================
|
||
// 当前对接的子应用列表
|
||
// 后续对接 Vue 2 项目时，修改 url 为实际的子应用地址
|
||
// ============================================================
|
||
|
||
export const subApps: SubAppConfig[] = [
|
||
{
|
||
name: 'vue2-app',
|
||
url: 'http://localhost:5173/',
|
||
baseroute: '/child-app',
|
||
// Vite 子应用必须开启 iframe 沙箱
|
||
// my-vue2-app 虽然是 Vue 2，但用 Vite 构建，输出 ES Module
|
||
iframe: true,
|
||
keepAlive: true,
|
||
routerMode: 'native'
|
||
},
|
||
{
|
||
name: 'vue3-app',
|
||
url: 'http://localhost:3001/',
|
||
baseroute: '/vue3-app',
|
||
// Vite 子应用必须开启 iframe 沙箱
|
||
iframe: true,
|
||
keepAlive: true,
|
||
routerMode: 'native'
|
||
},
|
||
{
|
||
name: 'mock-app',
|
||
url: 'http://localhost:5174/',
|
||
baseroute: '/mock-app',
|
||
// ============================================
|
||
// ⚠️ 样式冲突演示专用：
|
||
// iframe: false → 子应用 DOM 直接嵌入主文档
|
||
// disableScopecss: true → 关闭样式隔离，双方样式互相泄漏
|
||
// 这是一个纯 HTML 页面（无 JS 框架），不需要 ES Module 支持
|
||
// ============================================
|
||
iframe: false,
|
||
disableScopecss: true,
|
||
keepAlive: true,
|
||
routerMode: 'native'
|
||
},
|
||
{
|
||
name: 'mock-app-2',
|
||
url: 'http://localhost:5175/',
|
||
baseroute: '/mock-app-2',
|
||
// ============================================
|
||
// ⚠️ 子应用间样式冲突演示：
|
||
// 与 mock-app 相同：iframe: false, disableScopecss: true
|
||
// 用于验证：前一个子应用的样式是否会影响后一个子应用
|
||
// ============================================
|
||
iframe: false,
|
||
disableScopecss: true,
|
||
keepAlive: true,
|
||
routerMode: 'native'
|
||
}
|
||
]
|
||
|
||
/**
|
||
* 根据名称查找子应用配置
|
||
*/
|
||
export function getSubAppConfig(name: string): SubAppConfig | undefined {
|
||
return subApps.find((app) => app.name === name)
|
||
}
|