前端国际化JS库i18n配置使用方法
更新时间：2024年06月24日 09:37:06 作者：九层嵌套 for 循环
在Web开发中,实现前端的国际化i18n是一项重要的任务,它允许网站内容根据不同地区的用户需求进行本地化,下面这篇文章主要给大家介绍了关于前端国际化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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
代码永远都是那么好玩，而 Trick 不断。那天张克军在 twitter 上说还有比 [].slice.call() 更短的 Array 转换么2011-10-10
使用Chrome调试JavaScript的断点设置和调试技巧
这篇文章主要介绍了使用Chrome调试JavaScript的断点设置和调试技巧,需要的朋友可以参考下2014-12-12
这篇文章主要为大家详细介绍了js实现飞机大战小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Function类及闭包，学习js的朋友可以参考下2012-02-02
这篇文章主要介绍了从表单校验看JavaScript策略模式的使用，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-10
JavaScript typeof 操作符用法、陷阱与类型检测进阶指南
typeof返回变量类型字符串,适用于基本类型检测和变量是否存在,但无法精准识别对象类型,推荐结合Array.isArray、instanceof及Object.prototype.toString.call等方法,本文给大家介绍JavaScript typeof操作符用法、陷阱与类型检测进阶指南,感兴趣的朋友一起看看吧2025-09-09
最近发现现在租房还是签合同,越来越多采用电子签约的方式进行,好处不用多说节约成本,节约时间,下面我们来看看使用canvas实现电子签约完成线上签署功能2025-01-01
使用微信考勤，每次使用微信企业号开发:微信用户信息和web网页的session的关系这个里边的方法，调用微信的接口，有点慢，微信官方也推荐使用Cookies，但如何使用Cookies，自己却一直没有搞清楚。下面小编帮大家解决难题，需要的朋友可以参考下2015-09-09
当 JavaScript 文件在服务器上被更新或删除后,浏览器仍然请求旧的缓存文件,导致 404 错误,本文将深入探讨这一问题的原因,并提供多种解决方案,需要的可以参考下2025-03-03
有时候我们在设计网页的时候想动态的加载css文件,并不是将css文件写死在页面中,这时就可以使用下面方法.2009-07-07
最新评论