下载 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内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!
发表评论