前端国际化 JS 库 =＞ i18n

下载 JS 国际化库

1. pnpm install i18next
2. cnpm install i18next
3. npm install i18next
4. yarn install i18next

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

1. import i18n from "i18next";
2. import { initReactI18next } from "react-i18next";
3. import { englisth } from "./Englisth";
4. import { japanese } from "./Japanese";
5. import { thaiLanguage } from "./ThaiLanguage";
7. i18n.use(initReactI18next).init({
8. resources: {
9. en_US: {
10. translation: { ...englisth },
11. },
12. ja_JP: {
13. translation: { ...japanese },
14. },
15. th_TH: {
16. translation: { ...thaiLanguage },
17. },
18. },
19. lng: "ja_JP",
20. fallbackLng: "ja_JP",
21. // lng: "zh-CN",
22. // fallbackLng: "zh-CN",
23. interpolation: {
24. escapeValue: false,
25. },
26. });
28. export default i18n;
30. // import i18n from "@/Language/i18n";

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

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

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

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

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

时小记，终有成。