LobeChat i18n 国际化指南：使用 react-i18next 实现多语言支持与最佳实践

i18n by lobehub/lobe-chat

267 周安装量

74,700 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/lobehub/lobe-chat --skill i18n

开发 React 开源项目

🇨🇳中文介绍

LobeHub 国际化指南

默认语言：简体中文 (zh-CN)
框架：react-i18next
仅编辑 src/locales/default/ 目录下的文件 - 切勿编辑 locales/ 目录下的 JSON 文件
运行 pnpm i18n 以生成翻译文件（或在开发预览时手动翻译 zh-CN/en-US 文件）

键名命名规范

使用点号分隔的扁平化键名（而非嵌套对象）：

// ✅ 正确
export default {
  'alert.cloud.action': '立即体验',
  'sync.actions.sync': '立即同步',
  'sync.status.ready': '已连接',
};

// ❌ 避免使用嵌套对象
export default {
  alert: { cloud: { action: '...' } },
};

模式： {功能}.{上下文}.{动作|状态}

参数： 使用 {{变量名}} 语法

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

867,400 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

283,600 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

228,700 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

157,400 周安装

'alert.cloud.desc': '我们提供 {{credit}} 额度积分',

避免键名冲突：

// ❌ 冲突
'clientDB.solve': '自助解决',
'clientDB.solve.backup.title': '数据备份',

// ✅ 解决方案
'clientDB.solve.action': '自助解决',
'clientDB.solve.backup.title': '数据备份',

在 src/locales/default/{命名空间}.ts 中添加键名
在 src/locales/default/index.ts 中导出新的命名空间
开发预览：手动翻译 locales/zh-CN/{命名空间}.json 和 locales/en-US/{命名空间}.json
提醒用户在创建 PR 前运行 pnpm i18n — 请勿自行运行（速度非常慢）

import { useTranslation } from 'react-i18next';

const { t } = useTranslation('common');

t('newFeature.title');
t('alert.cloud.desc', { credit: '1000' });

// 多个命名空间
const { t } = useTranslation(['common', 'chat']);
t('common:save');

最常用： common（共享 UI 组件），chat（聊天功能），setting（设置）

其他：auth, changelog, components, discover, editor, electron, error, file, hotkey, knowledgeBase, memory, models, plugin, portal, providers, tool, topic

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

116,600 周安装

LobeChat i18n 国际化指南：使用 react-i18next 实现多语言支持与最佳实践

🇨🇳中文介绍

LobeHub 国际化指南

键名命名规范

相关 Skills

工作流程

使用方法

常用命名空间

最新 Skills