前端国际化 JS 库 =＞ i18n

下载 JS 国际化库

pnpm install i18next
cnpm install i18next
npm install i18next
yarn 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: "ja_JP",
  fallbackLng: "ja_JP",
  // 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",
},

由于我选择的语言是日语，所以此处的退出登录就会被翻译成   ログオンの終了  

时小记，终有成。