当前位置: 代码网 > it编程>编程语言>Javascript > 前端国际化JS库i18n配置使用方法

前端国际化JS库i18n配置使用方法

2024年07月05日 • Javascript •我要评论
下载 js 国际化库pnpm install i18nextcnpm install i18nextnpm install i18nextyarn install i18next在跟组件创建语言文件并

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

赞 (0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2026  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com