|Labs
预约演示平台
React(Lingo Compiler)
Alpha
React (MCP)React(i18n)旧版 CLI(v0)
已废弃

Lingo.dev Compiler

  • 工作方式
  • 快速开始
  • Compiler 快速上手

框架

  • Next.js 集成
  • Vite + React

指南

  • 语言切换
  • 自动复数处理
  • 手动覆盖
  • 构建模式
  • 项目结构
  • 翻译服务提供商
  • 自定义 locale 解析器
  • 开发工具

参考

  • 最佳实践
  • 配置参考
  • 故障排查
  • 迁移指南
  • 优化
  • 输出格式

自定义 locale 解析器

Alpha

Lingo.dev Compiler 目前处于 Alpha 阶段。它还不稳定,不建议用于生产环境,且 API 可能会在不同版本之间发生变化。

自定义 locale 解析器可让你改写 Lingo.dev Compiler 检测和持久化用户 locale 的方式。默认情况下,Compiler 会使用通过 localePersistence 选项配置的 cookie 持久化方案。若你需要更细粒度的控制——例如基于 URL 的路由、请求头检测、localStorage,或任意自定义逻辑——可以在 .lingo/ 目录下创建解析器文件。

解析器文件#

Compiler 会查找以下两个可选文件:

文件运行环境导出项
.lingo/locale-resolver.server.ts服务端(SSR、RSC)resolveLocale(request: Request): string
.lingo/locale-resolver.client.ts客户端(浏览器)resolveLocale(): string and persistLocale(locale: string): void

如果存在解析器文件,Compiler 就会优先使用它,而不是默认的 cookie 方案。如果只存在其中一个文件,另一个环境则会回退到默认行为。

服务端解析器#

服务端解析器会接收传入的 Request 对象,并返回一个 locale 代码字符串:

ts
// .lingo/locale-resolver.server.ts

export function resolveLocale(request: Request): string {
  const url = new URL(request.url);

  // Check URL path prefix: /es/about -> "es"
  const pathLocale = url.pathname.split("/")[1];
  const supportedLocales = ["en", "es", "de", "fr", "ja"];

  if (supportedLocales.includes(pathLocale)) {
    return pathLocale;
  }

  // Fall back to Accept-Language header
  const acceptLanguage = request.headers.get("Accept-Language");
  if (acceptLanguage) {
    const preferred = acceptLanguage.split(",")[0].split("-")[0];
    if (supportedLocales.includes(preferred)) {
      return preferred;
    }
  }

  return "en";
}

客户端解析器#

客户端解析器包含两个函数:一个用于读取当前 locale,另一个用于持久化 locale 变更:

ts
// .lingo/locale-resolver.client.ts

export function resolveLocale(): string {
  // Check URL path prefix
  const pathLocale = window.location.pathname.split("/")[1];
  const supportedLocales = ["en", "es", "de", "fr", "ja"];

  if (supportedLocales.includes(pathLocale)) {
    return pathLocale;
  }

  // Fall back to localStorage
  const stored = localStorage.getItem("locale");
  if (stored && supportedLocales.includes(stored)) {
    return stored;
  }

  return "en";
}

export function persistLocale(locale: string): void {
  localStorage.setItem("locale", locale);

  // Navigate to the locale-prefixed URL
  const path = window.location.pathname.replace(/^\/[a-z]{2}/, "");
  window.location.href = `/${locale}${path}`;
}

常见解析器模式#

按 URL 路径前缀路由(/es/about、/de/pricing):

ts
// .lingo/locale-resolver.server.ts
export function resolveLocale(request: Request): string {
  const url = new URL(request.url);
  const locale = url.pathname.split("/")[1];
  const supported = ["en", "es", "de", "fr"];
  return supported.includes(locale) ? locale : "en";
}
ts
// .lingo/locale-resolver.client.ts
export function resolveLocale(): string {
  const locale = window.location.pathname.split("/")[1];
  const supported = ["en", "es", "de", "fr"];
  return supported.includes(locale) ? locale : "en";
}

export function persistLocale(locale: string): void {
  const path = window.location.pathname.replace(/^\/[a-z]{2}/, "");
  window.location.href = `/${locale}${path}`;
}

resolveLocale 函数必须返回一个 locale 代码,并且该代码必须与你配置的 targetLocales 或 sourceLocale 之一匹配。若返回了不受支持的 locale 代码,Compiler 会回退到 source locale。

下一步#

Locale 切换
构建语言切换组件
配置参考
localePersistence 选项
项目结构
.lingo/ 目录结构
Next.js 集成
在 Next.js 中进行服务端 locale 解析

这个页面对你有帮助吗?

Max PrilutskiyMax Prilutskiy·已更新 4 个月前·2 分钟阅读