SuperAPI AI 工具集

microfrontends

前端与建站

查看项目

更新于 10-16 03:05

技能介绍

用途:指导在 Vercel 上构建、配置和部署微前端,把大型应用拆分为可独立部署、但对外呈现为统一应用的单元。Vercel 通过 microfrontends.json 在其全球网络上处理路由。

核心概念:默认应用(持有 microfrontends.json,处理未匹配请求)、子应用(拥有路由路径模式)、资源前缀(避免静态资源冲突)、独立部署。

支持框架:Next.js(App Router 与 Pages Router)、SvelteKit、React Router、Vite,均通过 @vercel/microfrontends 接入。

CLI(vercel microfrontends / vercel mf)主要命令:create-group 创建分组,默认交互式,可用 --non-interactive 全非交互(选项含 --name、--project(可重复)、--default-app、--default-route、--project-default-route(可重复,格式 <project>=<route>,非交互模式下每个非默认项目必填)、--yes 跳过确认);注意若新增项目会超出免费额度,--non-interactive 会被阻止,需交互确认计费变更。add-to-group 将当前项目加入已有分组,需交互式终端(选项 --group、--default-route)。remove-from-group 从分组移除当前项目,需交互式终端(--yes 仅跳过项目链接提示)。delete-group 删除分组及其全部设置,不可逆,需交互式终端(--group 可预选分组)。inspect-group 获取分组元数据(项目名、框架、git 仓库、根目录),便于自动化设置(选项 --group、--format=json、--config-file-name)。pull 拉取远程 microfrontends.json 用于本地开发(选项 --dpl)。另有 microfrontends proxy 本地开发代理、microfrontends port 打印自动分配的端口。

详细参考文档位于 references/ 目录,按主题查阅而非全部预读:configuration.md(入门、快速开始、框架设置、microfrontends.json 模式与字段、命名、示例);path-routing.md(路径表达式、资源前缀、标志控制路由、中间件);local-development.md(本地代理、多仓库配置、Turborepo、端口、部署保护);managing-microfrontends.md(inspect-group、增删项目、回退环境、导航、可观测性);troubleshooting.md(测试工具如 validateMiddlewareConfig、validateRouting、调试头、常见问题);security.md(部署保护、Vercel Firewall、微前端 WAF 规则)。

限制:部分命令需交互式终端;delete-group 不可逆;非交互创建分组受免费额度限制。