前端国际化 JS 库 =＞ i18n

下载 JS 国际化库

pnpm install i18nextcnpm install i18nextnpm install i18nextyarn install i18next

在跟组件创建语言文件并建立 i18n.ts （ 任意名字都可 ）

import i18n from "i18next";import { initReactI18next } from "react-i18next";import { englisth } from "./Englisth";import { japanese } from "./Japanese";import { thaiLanguage } from "./ThaiLanguage";i18n.use(initReactI18next).init({  resources: {    en_US: {      translation: { ...englisth },    },    ja_JP: {      translation: { ...japanese },    },    th_TH: {      translation: { ...thaiLanguage },    },  },  lng: "en_US",  fallbackLng: "en_US",  // lng: "zh-CN",  // fallbackLng: "zh-CN",  interpolation: {    escapeValue: false,  },});export default i18n;// import i18n from "@/Language/i18n";

lng 属性表示你选择的哪种语言，fallbacklng 属性表示你的备选语言（ 在主选语言查询不到的时候，会在 fallbacklng 中进行查找 ） 

resources 中的每个对象代表的是一种语言，需要自定义，我此处是将语言单独创建文件进行引入。

  示例：

接下来使用直接引入此文件，调用 .t() 方法即可使用，示例如下：

import i18n from "@/Language/i18n";{    label: i18n.t("退出登录"),    key: "loginExit",},

由于我默认选择的语言是 en_US ，所以此处的退出登录在页面上就会被翻译成   Log Out。

时小记，终有成。