Claude Code Router 多语言 i18n 配置新增一门语言只动 2 个文件的完整指南【免费下载链接】claude-code-routerOne local control plane for every AI agent: route across models, fuse new capabilities, orchestrate tools, and stay fully in control.项目地址: https://gitcode.com/GitHub_Trending/cl/claude-code-routerClaude Code Router 是统一管理多个 AI Agent 的本地控制平面其管理界面内置了中英文国际化i18n多语言能力。如果你的需求是给界面加一门日语或韩语最短路径是2 个文件、2 行配置、0 处组件改动。下面从一个真实问题讲起——到底要动哪几处动到什么程度算够。一、先定位界面里的文字是从哪来的这一步你会得到一个明确结论界面文案只集中在两个 JSON 文件和一个初始化文件里组件本身不存任何翻译。Claude Code Router 的国际化基于 i18next 框架。运行时的逻辑链条只有三段LanguageDetector插件读取浏览器语言偏好决定当前语言resources对象把各语言 JSON 文件挂载进 i18next组件通过useTranslation钩子拿到t函数用键名换取对应语言的文案。组件里不写死任何界面文字写死的只有键名。这决定了改语言的边界翻译在数据文件里逻辑在初始化文件里组件永远不用碰。二、新增一门语言的最短路径只加不改这一步你会拿到从零到可用的完整操作清单——以日语为例全程不修改任何现有代码。第 1 步创建语言文件。新建ui/src/locales/ja.json。先完整复制ui/src/locales/en.json的键结构再逐条替换 value 为日语。注意键照抄只改值任何一条键的增删都会导致界面出现未翻译的裸键名。第 2 步在初始化文件里注册。打开ui/src/i18n.ts改动只有 2 行——一段 import加上 resources 里的一行登记import ja from ./locales/ja.json; resources: { en: { translation: en }, zh: { translation: zh }, ja: { translation: ja }, // 新增的 1 行 },第 3 步构建验证。把浏览器语言环境切到日语或在地址栏手动指定语言刷新页面。LanguageDetector会自动识别到已注册的ja并启用无需额外配置。这条路径的价值在于只加不改en.json、zh.json和所有 React 组件一行不动现有中英文用户零感知。三、翻译键地图键怎么组织、怎么安全地新增与改名这一步你会看清键的层级规则以及一个改名操作前后要同步的完整清单。翻译键是两层结构第一层功能模块如common、app、login第二层模块内的具体文案如title、description、save。命名用 snake_case且同一把键在所有语言文件里必须完全一致——i18next 靠键对齐来切换语言键不一致等于这条文案在该语言下失踪。新增键很简单在app下加一行welcome: 欢迎回来{{name}}然后组件里t(app.welcome)即可。但改名是另一回事改前 / 改后对比// 改前扁平命名 { login: { api_key_input: API Key } }// 改后按语义归位 { login: { apiKey: API Key } }一次改名要同步 3 处en.json、zh.json以及你新加的任何语言文件、所有引用t(login.api_key_input)的组件。所以规则只有一条上线后不轻易改键名宁可新增同义键也不批量重命名。四、让它更聪明自动检测、回退与参数化这一步你会用到 3 个进阶能力不用用户手动选语言、缺翻译不露馅、一句话模板适配多个值。语言自动检测。LanguageDetector从浏览器的navigator.language读取偏好用户装好日语环境后无需任何设置。个别场景需要强制指定时1 行代码i18n.changeLanguage(zh);回退语言fallbackLng。初始化时配置了fallbackLng: en意味着日语文件里哪怕漏了一条app.save界面会显示英文 Save 而不是键名app.save。新增小语种时这层兜底非常关键——你可以先交付一个日语 英文补丁的半成品不阻塞上线。参数化翻译。动态内容不要拼接字符串用 i18next 的{{name}}占位符{ app: { welcome: 欢迎回来{{name}} } }t(app.welcome, { name: userName });模板写在语言文件里、变量写在调用处各语言可以按自己的语法调整语序和敬语代码侧完全不用分支判断。五、 i18n 排错速查表这一步你得到一个对照表90% 的国际化问题都能在这里对号入座。现象可能原因解法界面显示裸键名如app.save组件里的键与语言文件中的键拼写不一致对照en.json逐字符核对键名新语言切了不生效仍显示英文新语言没在resources里注册检查i18n.ts的 import 与登记行某条新文案是英文只在部分语言文件里加了条目以en.json为基准补齐所有语言切换语言后布局溢出、换行错乱中日英文本长度差异大容器用自适应宽度不要写死像素界面原样显示{{name}}调用t()时参数名与占位符不一致对齐t(app.welcome, { name: ... })的变量名改完语言文件后界面不更新浏览器缓存或构建产物未刷新强制刷新页面或重新构建六、收尾一句话价值 关键文件Claude Code Router 的多语言支持把翻译收敛成数据问题新语言是加文件不是改逻辑这也是它能低成本扩展到更多语言的底层原因。关键文件一览官方文档README.mdi18n 初始化配置ui/src/i18n.ts英文语言文件ui/src/locales/en.json中文语言文件ui/src/locales/zh.json项目背景blog/zh/项目初衷及原理.md【免费下载链接】claude-code-routerOne local control plane for every AI agent: route across models, fuse new capabilities, orchestrate tools, and stay fully in control.项目地址: https://gitcode.com/GitHub_Trending/cl/claude-code-router创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考