前端國際化JS庫i18n配置使用方法
更新時間：2024年06月24日 09:37:06 作者：九層嵌套?for?循環(huán)
在Web開發(fā)中,實現(xiàn)前端的國際化i18n是一項重要的任務(wù),它允許網(wǎng)站內(nèi)容根據(jù)不同地區(qū)的用戶需求進(jìn)行本地化,下面這篇文章主要給大家介紹了關(guān)于前端國際化JS庫i18n配置使用的相關(guān)資料,需要的朋友可以參考下
下載 JS 國際化庫
pnpm install i18next cnpm install i18next npm install i18next yarn install i18next
在跟組件創(chuàng)建語言文件并建立 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 中進(jìn)行查找 ）
resources 中的每個對象代表的是一種語言，需要自定義，我此處是將語言單獨創(chuàng)建文件進(jìn)行引入。
示例：
接下來使用直接引入此文件，調(diào)用 .t() 方法即可使用，示例如下：
import i18n from "@/Language/i18n";
{
label: i18n.t("退出登錄"),
key: "loginExit",
},由于我默認(rèn)選擇的語言是 en_US ，所以此處的退出登錄在頁面上就會被翻譯成 Log Out。
總結(jié)
到此這篇關(guān)于前端國際化JS庫i18n的文章就介紹到這了,更多相關(guān)前端國際化JS庫i18n內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
代碼永遠(yuǎn)都是那么好玩，而 Trick 不斷。那天張克軍在 twitter 上說還有比 [].slice.call() 更短的 Array 轉(zhuǎn)換么2011-10-10
使用Chrome調(diào)試JavaScript的斷點設(shè)置和調(diào)試技巧
這篇文章主要介紹了使用Chrome調(diào)試JavaScript的斷點設(shè)置和調(diào)試技巧,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript高級程序設(shè)計 讀書筆記之八 Function類及閉包
Function類及閉包，學(xué)習(xí)js的朋友可以參考下2012-02-02
這篇文章主要介紹了從表單校驗看JavaScript策略模式的使用，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-10-10
JavaScript typeof 操作符用法、陷阱與類型檢測進(jìn)階指南
typeof返回變量類型字符串,適用于基本類型檢測和變量是否存在,但無法精準(zhǔn)識別對象類型,推薦結(jié)合Array.isArray、instanceof及Object.prototype.toString.call等方法,本文給大家介紹JavaScript typeof操作符用法、陷阱與類型檢測進(jìn)階指南,感興趣的朋友一起看看吧2025-09-09
最近發(fā)現(xiàn)現(xiàn)在租房還是簽合同,越來越多采用電子簽約的方式進(jìn)行,好處不用多說節(jié)約成本,節(jié)約時間,下面我們來看看使用canvas實現(xiàn)電子簽約完成線上簽署功能2025-01-01
微信企業(yè)號開發(fā)之微信考勤Cookies的使用
使用微信考勤，每次使用微信企業(yè)號開發(fā):微信用戶信息和web網(wǎng)頁的session的關(guān)系這個里邊的方法，調(diào)用微信的接口，有點慢，微信官方也推薦使用Cookies，但如何使用Cookies，自己卻一直沒有搞清楚。下面小編幫大家解決難題，需要的朋友可以參考下2015-09-09
JavaScript中文件緩存導(dǎo)致404錯誤的解決方案
當(dāng) JavaScript 文件在服務(wù)器上被更新或刪除后,瀏覽器仍然請求舊的緩存文件,導(dǎo)致 404 錯誤,本文將深入探討這一問題的原因,并提供多種解決方案,需要的可以參考下2025-03-03
javascript 動態(tài)加載 css 方法總結(jié)
有時候我們在設(shè)計網(wǎng)頁的時候想動態(tài)的加載css文件,并不是將css文件寫死在頁面中,這時就可以使用下面方法.2009-07-07