Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>MFA - Micro Frontend AssistantNew to Visual Studio Code? Get it now.
MFA - Micro Frontend Assistant

MFA - Micro Frontend Assistant

XiangHongAi

|
9 installs
| (0) | Free
Lightweight MFA micro frontend project launcher for configuration initialization, source retrieval, application startup, and mixed local/remote access.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

MFA - 微前端开发助手

Version Installs Rating

在 VS Code 中获取微前端项目、启动主应用与微应用、通过统一入口联调、管理 Sitemap 与菜单,并构建本地整包。核心能力来自 @seed-fe/mfa,已随扩展打包,无需全局安装。

工程约定

<workspace-root>/
├── project/                 # 项目配置仓库(meta.json、menu.config.json、dev.local.jsonc 等)
├── container/<name>/        # 主应用
└── microapps/<name>/        # 微应用

开始使用

  1. 点击 Activity Bar 中的 MFA 图标,打开 MFA Tree View。
  2. 新工作区执行 MFA: 获取项目 并输入项目配置仓库地址;已有工程执行 MFA: 刷新项目。
  3. 在 MFA Tree View 中为应用获取源码并启动,统一入口地址显示在项目服务的 Terminal 中。

主要功能

  • 应用启停:在 MFA Tree View 中获取源码、启动(或以 Mock 启动)和停止应用,每个进程独占一个 Terminal。
  • 控制台(MFA: 打开控制台):查看项目与应用信息,拉取、推送迭代分支,打 Tag。
  • Sitemap:生成与查看应用级、项目级 Sitemap。页面声明可选:不写时按页面路由生成;需要标题、权限等信息时,在页面文件中通过编辑器标题栏的 MFA: 插入 Sitemap 基础配置 写入声明骨架再补充。
  • 菜单配置:从控制台进入,把 Sitemap 页面拖入菜单并编排分组与外链;可编辑正式配置,或只在本地生效的临时配置。
  • 本地构建(MFA: 本地构建项目):选择应用与工程配置,构建并在工程根 dist/ 生成制品。

配置

开发服务、端口、代理与包管理器等本机设置都写在 project/dev.local.jsonc(不存在时新建,应加入项目配置仓库的 .gitignore),CLI 与扩展共用这一份配置。

接口代理按路径前缀配置,保存即生效:

{
  "server.proxy.api": {
    "/api/": { "target": "https://gateway.example.invalid", "changeOrigin": true },
  },
  // 可选:API 共享的 Bearer Token
  // "server.proxy.token": "",
}

更多字段(端口、整包环境兜底、出站代理、包管理器等)见 @seed-fe/mfa 文档。

License

BSD-3-Clause

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Your Privacy Choices
  • Consumer Health Privacy
© 2026 Microsoft