脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 前端国际化JS库i18n

前端国际化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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS+CSS3实现超炫的散列画廊特效

    JS+CSS3实现超炫的散列画廊特效

    这篇文章主要为大家详细介绍了JS+CSS3实现超炫的散列画廊特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • JS树形菜单组件Bootstrap TreeView使用方法详解

    JS树形菜单组件Bootstrap TreeView使用方法详解

    这篇文章主要为大家详细介绍了js组件Bootstrap TreeView使用方法，本文一部分针对于bootstrap的treeview的实践，另一部分是介绍自己写的树形菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 原生JS实现图片懒加载(lazyload)实例

    原生JS实现图片懒加载(lazyload)实例

    图片懒加载也是比较常见的一种性能优化的方法，本篇文章主要介绍了原生JS实现图片懒加载(lazyload)实例，这里整理了详细的代码,有需要的小伙伴可以参考下
    2017-06-06
  • JavaScript实现拖拽网页内元素的方法

    JavaScript实现拖拽网页内元素的方法

    这篇文章主要介绍了JavaScript实现拖拽网页内元素的方法,以注释形式较为详细的分析了javascript事件监听、元素定位的相关技巧,并配有详细的注释以便于理解,需要的朋友可以参考下
    2015-04-04
  • 基于Css3和JQuery实现打字机效果

    基于Css3和JQuery实现打字机效果

    最近做项目，有需求实现一个字符逐个出现，类似于打字机效果，于是上网搜了相关资料，接下来，小编就给大家详细介绍基于Css3和JQuery实现打字机效果，需要的朋友可以参考下
    2015-08-08
  • 使用 JavaScript Promise 读取 Github 用户数据

    使用 JavaScript Promise 读取 Github 用户数据

    这篇文章主要介绍了使用JavaScript Promise读取Github用户数据，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-08-08
  • javascript使用canvas实现饼状图效果

    javascript使用canvas实现饼状图效果

    这篇文章主要为大家详细介绍了javascript使用canvas实现饼状图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • BootStrap 导航条实例代码

    BootStrap 导航条实例代码

    本文通过实例代码给大家介绍了bootstrap导航条效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
    2017-05-05
  • js定时器的使用(实例讲解)

    js定时器的使用(实例讲解)

    本篇文章主要介绍了js中定时器的使用方法。需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • 微信登录过程、openId、token详解(代码实现)

    微信登录过程、openId、token详解(代码实现)

    这篇文章主要介绍了微信登录过程、openId、token详解,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-08-08

最新评论