前端国际化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: "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。

总结

到此这篇关于前端国际化JS库i18n的文章就介绍到这了,更多相关前端国际化JS库i18n内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。

THE END

Vue.js 前端开发编程开发
# i18n # 国际化 # js库