如何构建一个支持多语言的前端国际化方案？

答案：构建前端国际化方案需选用react-i18next等成熟库，统一管理多语言JSON资源，支持动态切换与持久化，结合路由实现SEO友好和格式化翻译。

构建一个支持多语言的前端国际化方案，关键在于统一管理文本资源、动态切换语言、适配组件展示，并确保可维护性和扩展性。以下是具体实现思路和步骤。

1. 使用成熟的国际化库

选择一个稳定高效的国际化工具是基础。目前最常用的是 react-i18next（React 项目）或 vue-i18n（Vue 项目），它们提供了完整的多语言支持能力。

以 react-i18next 为例：

• 安装依赖：i18next、react-i18next、i18next-browser-languagedetector、i18next-http-backend
• 初始化 i18n 实例，配置默认语言、支持语言列表、资源文件加载方式
• 通过 useTranslation 钩子在组件中调用翻译函数 t()

2. 组织语言资源文件

将不同语言的文案按模块或页面组织成 JSON 文件，便于维护。

目录结构示例：

/public/locales/
  └── en/
      ├── common.json
      ├── home.json
      └── user.json
  └── zh/
      ├── common.json
      ├── home.json
      └── user.json

每个 JSON 文件存放对应语言的键值对：

{"welcome": "Welcome to our app"}（en/common.json） {"welcome": "欢迎使用我们的应用"}（zh/common.json）

3. 支持语言动态切换

允许用户手动切换语言，并将选择持久化（如 localStorage）。

• 使用 changeLanguage 方法切换当前语言
• 结合 language detector 插件自动识别浏览器语言偏好
• 切换后界面文本自动更新，无需刷新页面

示例代码：

const { i18n } = useTranslation();
i18n.changeLanguage('zh');

4. 处理格式化内容与复数

不同语言有不同语法结构，需支持变量插值、复数、性别等。

i18next 支持通过 ICU 或内置复数规则处理复杂情况：

"itemCount": "{{count}} item{{count, plural, one: '' many: 's'}}"

调用时传入变量即可：

t('itemCount', { count: 5 }) → "5 items"

5. 与路由和 SEO 协同（可选）

若需搜索引擎友好，可结合 URL 前缀区分语言，如 /zh/home、/en/home。

• 从路由中读取语言参数并设置到 i18n
• 更新 html 的 lang 属性，提升无障碍访问体验
• 配合服务端渲染（SSR）预加载对应语言包

基本上就这些。核心是选对工具、结构清晰、支持动态切换和格式化。只要资源文件维护好，新增语言只需添加对应 JSON，开发效率高，维护成本低。