Main 主应用

主应用是 wujie 微前端容器，负责登录认证、菜单/历史导航、子应用挂载与权限过滤。它是唯一访问入口，子应用经 wujie 运行时加载。

主要功能

用户认证与路由守卫（登录态 / 白名单）
微前端应用集成（startApp/destroyApp 按路由启停子应用）
菜单与历史导航（动态加载各子应用硬编码菜单并做权限过滤）
应用切换（AppSelect）
子应用路由加载态与加载失败兜底

项目结构

main
├── src
│ ├── assets
│ │ ├── html/index.html       # HTML 模板
│ │ └── imgs/                 # logo、用户头像等
│ ├── components
│ │ ├── layout/               # 布局组件
│ │ │ ├── AppHeader.vue       # 顶栏（应用切换、用户信息）
│ │ │ ├── SideNav.vue         # 侧边菜单栏
│ │ │ ├── MenuTree.vue        # 菜单树渲染
│ │ │ ├── HistoryTabs.vue     # 历史标签
│ │ │ ├── AppLoadError.vue    # 子应用加载失败兜底
│ │ │ ├── LayoutLoading.vue   # 布局加载态
│ │ │ ├── useLayoutState.ts   # 布局状态逻辑
│ │ │ └── useUserHeader.ts    # 用户顶栏逻辑
│ │ └── more/AppSelect.vue    # 应用切换器
│ ├── router
│ │ ├── index.ts              # 路由配置（动态生成子应用路由）
│ │ └── permission.ts         # 全局路由守卫
│ ├── stores/apps.ts          # 应用/菜单状态（可见性过滤）
│ ├── utils
│ │ ├── appMenus.ts           # 动态加载子应用菜单
│ │ ├── auth.ts               # 登录态、白名单
│ │ └── wujiePatches.ts       # wujie 运行时降噪补丁
│ ├── views
│ │ ├── admin/
│ │ │ ├── app.vue             # 子应用容器（wujie）
│ │ │ ├── home.vue            # 首页
│ │ │ ├── index.vue           # 后台主框架
│ │ │ └── user.vue            # 个人中心
│ │ └── login/index.vue       # 登录页
│ ├── App.vue                 # 根组件
│ ├── main.ts                 # 入口文件
│ └── env.d.ts                # 类型声明
└── package.json              # 依赖

路由

主应用路由在 router/index.ts 中动态生成，子应用路由按 apps.json 的 appKey 批量生成：

/ → 重定向到 /admin
/login → 登录页
/admin → 后台主框架，子路由 pHome（首页）、pUser（个人中心）及各子应用
/403、/:pathMatch(.*)* → 错误页（复用 @Pcomponents/page/error.vue）

路由守卫在 router/permission.ts 中统一处理：免登录/白名单直接放行，未登录（无 p_token）跳转登录页。

子应用加载

子应用路由 admin/{appKey} 对应 views/admin/app.vue，内部用 wujie startApp/destroyApp 按生命周期启停
开发环境下子应用地址取 http://localhost:{devPort}/，生产取 proUrl
子应用菜单通过 utils/appMenus.ts 的 loadAppMenus(appKey) 按 appKey 动态 import() 加载（带缓存），无需手动改 main 代码
stores/apps.ts 用 filterMenuTree 按权限过滤，应用是否对当前用户可见由「该应用下是否存在可见菜单」决定

环境变量

环境变量统一 PUBLIC_ 前缀，见 .env.example：

变量	说明
`PUBLIC_TITLE`	页面标题
`PUBLIC_API_BASE_URL`	接口地址（生产由 nginx 代理，可留空）
`PUBLIC_FREE_LOGIN`	免登录开关（T 开启 / F 关闭）
`PUBLIC_MOCK`	mock 数据开关（仅开发环境生效）

Main 主应用 ​

主要功能 ​

项目结构 ​

路由 ​

子应用加载 ​

环境变量 ​

Main 主应用

主要功能

项目结构

路由

子应用加载

环境变量