microfrontends

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Vercel Microfrontends

Split a large application into independently deployable units that render as one cohesive app. Vercel handles routing on its global network using

microfrontends.json

Core concepts: default app (has

microfrontends.json

, serves unmatched requests) · child apps (have

routing

path patterns) · asset prefix (prevents static-asset collisions) · independent deployments.

Frameworks: Next.js (App Router + Pages Router), SvelteKit, React Router, Vite — all via

@vercel/microfrontends

CLI (
vercel microfrontends
/
vercel mf
):

```
create-group
```
— create a new group; interactive by default, or fully non-interactive with
```
--non-interactive
```
(options:
```
--name
```
,
```
--project
```
(repeatable),
```
--default-app
```
,
```
--default-route
```
,
```
--project-default-route
```
(repeatable, format:
```
<project>=<route>
```
, required for each non-default project in non-interactive mode),
```
--yes
```
to skip confirmation prompt); note:
```
--non-interactive
```
is blocked if adding the projects would exceed the free tier limit — the user must confirm billing changes interactively
```
add-to-group
```
— add the current project to an existing group; requires interactive terminal (options:
```
--group
```
,
```
--default-route
```
)
```
remove-from-group
```
— remove the current project from its group; requires interactive terminal (option:
```
--yes
```
skips project-link prompt only)
```
delete-group
```
— delete a group and all its settings, irreversible; requires interactive terminal (option:
```
--group
```
to pre-select group)
```
inspect-group
```
— retrieve group metadata (project names, frameworks, git repos, root dirs); useful for automating setup (options:
```
--group
```
,
```
--format=json
```
,
```
--config-file-name
```
)
```
pull
```
— pull remote
```
microfrontends.json
```
for local development (option:
```
--dpl
```
)
```
microfrontends proxy
```
— local dev proxy ·
```
microfrontends port
```
— print auto-assigned port

将大型应用拆分为可独立部署的单元，这些单元可渲染为一个连贯的应用。Vercel 通过

microfrontends.json

在其全球网络上处理路由。

核心概念： 默认应用（包含

microfrontends.json

，处理未匹配的请求）· 子应用（包含

routing

路径模式）· 资源前缀（避免静态资源冲突）· 独立部署。

支持框架： 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
```
—— 打印自动分配的端口

Finding Detailed Information

查找详细信息

This skill includes detailed reference docs in the

references/

directory. Do not read all references upfront. Instead, search or grep the relevant file when the user asks about a specific topic:

Topic	Reference file
Getting started, quickstart, framework setup, `microfrontends.json` schema, fields, naming, examples	`references/configuration.md`
Path expressions, asset prefixes, flag-controlled routing, middleware	`references/path-routing.md`
Local proxy setup, polyrepo config, Turborepo, ports, deployment protection	`references/local-development.md`
Inspecting groups ( `inspect-group` ), adding/removing projects, fallback environments, navigation, observability	`references/managing-microfrontends.md`
Testing utilities ( `validateMiddlewareConfig` , `validateRouting` , etc.), debug headers, common issues	`references/troubleshooting.md`
Deployment protection, Vercel Firewall, WAF rules for microfrontends	`references/security.md`

When the user asks about a specific topic, use grep or search over the relevant reference file to find the answer without loading all references into context.

本技能在

references/

目录中包含详细的参考文档。请勿预先阅读所有参考文档。相反，当用户询问特定主题时，搜索或筛选相关文件：

主题	参考文件
入门指南、快速开始、框架设置、 `microfrontends.json` schema、字段、命名、示例	`references/configuration.md`
路径表达式、资源前缀、标志控制路由、中间件	`references/path-routing.md`
本地代理设置、多仓库配置、Turborepo、端口、部署保护	`references/local-development.md`
检查组（ `inspect-group` ）、添加/移除项目、fallback环境、导航、可观测性	`references/managing-microfrontends.md`
测试工具（ `validateMiddlewareConfig` 、 `validateRouting` 等）、调试头、常见问题	`references/troubleshooting.md`
部署保护、Vercel防火墙、微前端WAF规则	`references/security.md`

当用户询问特定主题时，通过搜索或筛选相关参考文件来查找答案，无需将所有参考文档加载到上下文环境中。