SuperAPI AI 工具集

vercel-microfrontends

前端与建站

查看项目

更新于 10-15 15:38

技能介绍

用途

Vercel Microfrontends 用于将大型应用拆分为可独立部署的单元,同时对外渲染为一个统一的整体应用。Vercel 通过 microfrontends.json 在其全球网络上处理路由。当用户提到微前端、multi-zones 或拆分应用时,可使用本技能。

核心概念

  • 默认应用:持有 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 预选分组)。
  • pull:拉取远程 microfrontends.json 用于本地开发(选项:--dpl)。
  • microfrontends proxy:本地开发代理。
  • microfrontends port:打印自动分配的端口。

详细参考文档

本技能在 references/ 目录中包含详细参考文档。不要预先读取全部参考,而应在用户询问特定主题时搜索或 grep 相关文件:

  • 入门、快速开始、框架设置、microfrontends.json 模式、字段、命名、示例:references/configuration.md
  • 路径表达式、资源前缀、标志控制路由、中间件:references/path-routing.md
  • 本地代理设置、polyrepo 配置、Turborepo、端口、部署保护:references/local-development.md
  • 检查分组(inspect-group)、添加/移除项目、回退环境、导航、可观测性:references/managing-microfrontends.md
  • 测试工具(validateMiddlewareConfig、validateRouting 等)、调试头、常见问题:references/troubleshooting.md
  • 部署保护、Vercel Firewall、微前端 WAF 规则:references/security.md

当用户询问特定主题时,使用 grep 或搜索相关参考文件以找到答案,而无需将所有参考加载到上下文中。

适用场景

适用于需要在 Vercel 上构建、配置和部署微前端的场景,尤其是将大型应用拆分为多个可独立部署单元并统一路由的需求。

限制

部分 CLI 命令需要交互式终端;--non-interactive 在超出免费额度限制时会被阻止,需交互式确认计费变更;delete-group 不可逆。其余功能、收费、价格、平台、效果或使用步骤等细节暂未提供。