Build Output API 通配符Wildcard域名路由实战基于域名的多语言静态站点分发【免费下载链接】examplesEnjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.项目地址: https://gitcode.com/GitHub_Trending/examples1/examples导读本指南聚焦 Vercel Build Output API 的wildcard通配符路由能力通过 build-output-api/wildcard 预构建Prebuilt示例讲解如何让多个域名或子域名指向同一个 Deployment并根据请求的域名把流量路由到不同的静态页面。读完本文你将掌握wildcard配置的完整写法、$wildcard占位符的引用方式并能独立实现一个部署、多语言子域名的典型场景。示例概览Domain-Based Routing基于域名的路由这是本仓库 build-output-api 目录下 11 个 Build Output API 预构建示例之一。该示例的在线演示地址为https://build-output-api-wildcard.vercel.sh访问主域名会得到一个包含四个语言子域名入口的索引页en.build-output-api-wildcard.vercel.sh→ 英文Englishes.build-output-api-wildcard.vercel.sh→ 西班牙语Españolfr.build-output-api-wildcard.vercel.sh→ 法语Françaispt.build-output-api-wildcard.vercel.sh→ 葡萄牙语Português四个子域名全部指向同一个Deployment却各自渲染出对应语言的页面。索引页实现位于 .vercel/output/static/index.html四个语言页面分别是english.html、spanish.html、french.html、portuguese.html均存放在 .vercel/output/static/ 目录下。核心原理wildcard 配置如何工作在 Build Output API 中.vercel/output/config.json是预构建项目的路由配置文件。其中的wildcard配置允许你声明任意数量的域名或子域名这些域名指向同一个 Deployment但会根据实际请求的域名路由到特定的页面。最常见的用途就是本文示例所展示的基于域名提供本地化多语言内容版本。其工作流程如下请求到达平台后系统将请求的域名与wildcard数组中的domain字段逐一匹配命中匹配时该条目的value会被注入到路由配置中路由配置通过$wildcard占位符引用这个值实现动态路由。$wildcard占位符有两种典型用法按文件名路由到静态文件如本例所示把 wildcard 值拼进dest路径指向对应的静态 HTML作为查询字符串参数追加把 wildcard 值作为 query-string 参数传给 Edge Function 或 Serverless Function在函数内根据该值做业务分发。完整配置逐行解析本示例的完整配置如下文件.vercel/output/config.json{ version: 3, wildcard: [ { domain: en.build-output-api-wildcard.vercel.sh, value: english }, { domain: es.build-output-api-wildcard.vercel.sh, value: spanish }, { domain: fr.build-output-api-wildcard.vercel.sh, value: french }, { domain: pt.build-output-api-wildcard.vercel.sh, value: portuguese } ], routes: [{ src: /, dest: /$wildcard.html }] }version: 3声明项目遵循 Build Output API v3 规范这是使用wildcard配置的前提。整个 build-output-api 目录下的示例均为符合 Build Output API 规范的预构建Prebuilt项目。wildcard数组数组中的每个对象由两个字段组成字段含义本示例取值示例domain需要匹配的完整域名含子域名请求命中该域名时触发路由en.build-output-api-wildcard.vercel.shvalue匹配后注入到路由中的字符串供$wildcard占位符引用english、spanish、french、portuguesevalue并不要求与文件名一致它只是一个映射键——例如你可以把value设为us、de、jp之类的代码再在routes中把它映射到任意目标。routes与$wildcard占位符routes: [{ src: /, dest: /$wildcard.html }]src: /匹配站点根路径的请求dest: /$wildcard.html把请求重写rewrite到$wildcard占位符展开后的路径。当用户请求fr.build-output-api-wildcard.vercel.sh时匹配到domain: fr.build-output-api-wildcard.vercel.sh、value: french于是请求被重写到/french.html最终由 .vercel/output/static/french.html 响应。静态文件目录预构建输出的存放约定与 Next.js 等框架项目由构建工具自动产出不同Build Output API 项目要求开发者自行把产物放进约定目录。本示例的输出目录结构为build-output-api/wildcard/ └── .vercel/output/ ├── config.json # 路由与 wildcard 配置 └── static/ # 静态资源目录 ├── index.html ├── english.html ├── spanish.html ├── french.html └── portuguese.html.vercel/output/static/是 Build Output API 存放静态文件的约定目录config.json中的routes路由目标即相对于该目录解析。各语言页面均为极简的纯文本 HTML例如 english.html 内容为This page was served in englishspanish.html 为Esta página fue servida en españolfrench.html 为Cette page a été servie en françaisportuguese.html 为Esta página foi veiculada em português。它们体积小巧、职责单一非常适合作为演示 wildcard 路由命中效果的载体。部署方式这类预构建项目无需任何框架构建流程直接使用 Vercel CLI 即可部署。根据 build-output-api 总览文档 的说明在示例目录内执行vercel deploy --prebuilt--prebuilt标志告诉 CLI 跳过构建阶段直接使用仓库中已有的.vercel/output目录内容进行部署。部署前请确保已安装并登录 Vercel CLI将config.json中声明的子域名如en.build-output-api-wildcard.vercel.sh正确绑定到该 Deployment域名解析已生效使请求能够到达对应部署。部署完成后即可通过不同子域名访问同一部署下的不同语言页面验证基于域名的路由效果。扩展思路从静态页面到动态分发虽然本示例只演示了静态文件路由但$wildcard占位符的能力不止于此。将 wildcard 值作为查询参数传递给函数即可扩展出更复杂的业务逻辑例如{ version: 3, wildcard: [ { domain: en.example.com, value: en }, { domain: de.example.com, value: de } ], routes: [ { src: /api/hello, dest: /api/hello?lang$wildcard } ] }这样Edge Function 或 Serverless Function 便能在运行时读取lang参数依据语言代码动态返回本地化内容或调用对应语种的第三方服务。从源码结构看本仓库的 build-output-api 目录还收录了 routes、serverless-functions、edge-functions 等示例可与本示例组合阅读理解路由规则与函数分发的完整能力边界。小结通过wildcard配置与$wildcard占位符Vercel Build Output API 让单部署、多域名、按域名分发成为一行配置即可完成的工作wildcard负责域名 → 值的映射routes负责值 → 目标的转发。本示例以四个语言子域名为载体完整演示了该机制从配置文件到静态文件命中的全过程是构建多语言站点、地域化落地页等场景的可靠参考范式。【免费下载链接】examplesEnjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.项目地址: https://gitcode.com/GitHub_Trending/examples1/examples创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考