脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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可拖拽放大的层拖动特效实现方法

    Js可拖拽放大的层拖动特效实现方法

    这篇文章主要介绍了Js可拖拽放大的层拖动特效实现方法,涉及javascript操作DOM元素及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JS Date时间格式化的方法

    JS Date时间格式化的方法

    这篇文章主要介绍了JS Date时间格式化的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • 屏蔽F1~F12的快捷键的js函数

    屏蔽F1~F12的快捷键的js函数

    keyCod从113-123分别禁用了F2-F12键,13禁用了回车键(Enter),8禁用了退格键(BackSpace)
    2010-05-05
  • TypeScript开发小状况记录之选且只选一个

    TypeScript开发小状况记录之选且只选一个

    在开发中需要定义一个对象的类型,此类型必须包含某n个字段中的其中一种,这篇文章主要给大家介绍了关于TypeScript开发小状况记录之选且只选一个的相关资料,需要的朋友可以参考下
    2022-10-10
  • xmlplus组件设计系列之图标（ICON）(1）

    xmlplus组件设计系列之图标（ICON）(1）

    这篇文章主要为大家详细介绍了xmlplus组件设计系列之图标ICON的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 微信小程序自定义单项选择器样式

    微信小程序自定义单项选择器样式

    这篇文章主要为大家详细介绍了微信小程序自定义单项选择器样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 通过实例了解Render Props回调地狱解决方案

    通过实例了解Render Props回调地狱解决方案

    这篇文章主要介绍了通过实例了解Render Props回调地狱解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • js AspxButton的客户端操作

    js AspxButton的客户端操作

    processOnServer使您可以指定当前Button应该处理客户端的事件或服务器端事件。
    2009-06-06
  • Mint-UI时间组件起始时间问题及时间插件使用

    Mint-UI时间组件起始时间问题及时间插件使用

    这篇文章主要介绍了Mint-UI时间组件起始时间问题的解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-08-08
  • webpack之引入图片的实现及问题

    webpack之引入图片的实现及问题

    如果我们希望在页面引入图片。当我们基于webpack进行开发时，引入图片会遇到一些问题，这篇文章主要介绍了webpack之引入图片的实现及问题，非常具有实用价值，需要的朋友可以参考下
    2018-10-10

最新评论