i18n了解和配置

最新推荐文章于 2025-07-18 16:05:04 发布

今日亦是美好的一天

最新推荐文章于 2025-07-18 16:05:04 发布

阅读量250

点赞数 2

CC 4.0 BY-SA版权

文章标签： il8n react.js

本文链接：https://blog.csdn.net/2401_86231751/article/details/148840412

i18next是一个用来支持应用国际化的javascript库。

安装

npm i i18next react-i18next

i18next 提供了翻译的基本能力。

react-i18next 是 i18next 的一个插件，用来降低 react 的使用成本。

可选：

npm i i18next-browser-languagedetector i18next-http-backend

i18next-browser-languagedetector 检测浏览器语言的插件。

i18next-http-backend从服务器加载翻译资源文件

创建翻译文件

zh.json

{
  "language": "语言",
  "switch": "选择",
}

en.json

{
  "language": "Language",
  "switch": "Switch",
}

创建 i18n.js 文件

// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from './locales/en.json';
import zh from './locales/zh.json';

i18n
  .use(initReactI18next)  
  .init({
    resources: {
      en: { translation: en },//翻译文本
      zh: { translation: zh },
    },
    lng: 'zh',  
    fallbackLng: 'en', // When no lang
    interpolation: {
      escapeValue: false, // React avoid XSS
    },
  });

export default i18n;