快捷導(dǎo)航

react之umi配置國際化語言locale的踩坑記錄

更新時(shí)間：2023年02月10日 15:20:44 作者：weixin_39788999

這篇文章主要介紹了react之umi配置國際化語言locale的踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

umi配置國際化語言locale的踩坑

因?yàn)轫?xiàng)目創(chuàng)建的比較早，用的是umi2+版本，修改默認(rèn)語言是英文，官方說直接改配置的defalut，但是我改完并不生效，可能是我的版本呢原因，找了好久，總算找到解決辦法的方法了。

其中我的項(xiàng)目版本使用的umi和國際化插件如下：

"umi": "^2.4.4",
 "umi-plugin-react": "^1.7.2"

1 修改默認(rèn)顯示語言，方法如下

2 再在app.js加入一下代碼

小小的問題，可能是版本的原因，嘗試了好久，也是挺折騰人的…

react-umi 國際化（中英文切換）

.umirc.js國際化默認(rèn)配置

export default {
? plugins: [
? ? [
? ? ? 'umi-plugin-react',
? ? ? {
? ? ? ? locale: {
? ? ? ? ? default: 'zh-CN', //默認(rèn)語言 zh-CN
? ? ? ? ? baseNavigator: true, // 為true時(shí)，用navigator.language的值作為默認(rèn)語言
? ? ? ? ? antd: true // 是否啟用antd的<LocaleProvider />
? ? ? ? }
? ? ? }
? ? ]
? ]
};

目錄及約定

```javascript
├── dist/ ? ? ? ? ? ? ? ? ? ? ? ? ?
├── mock/ ? ? ? ? ? ? ? ? ? ? ? ??
└── src/ ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ├── layouts/index.js ? ? ? ? ?
? ? ├── pages/ ? ? ? ? ? ? ? ? ? ?
? ? └── locales ? ? ? ? ? ? ? // 多語言文件存放目錄，里面的文件會(huì)被umi自動(dòng)讀取
? ? ? ? ├── zh-CN.js
? ? ? ? └── en-US.js ? ? ? ? ? ? ??
├── .umirc.js ? ? ? ? ? ? ? ? ? ??
├── .env ? ? ? ? ? ? ? ? ? ? ? ? ?
└── package.json

多語言文件約定
多語言文件的命名規(guī)范：-.js

多語言文件的內(nèi)容規(guī)范：鍵-值組成的字面量，如下：

zh-CN.js

zh-CN.js

export default {
? WELCOME_TO_UMI_WORLD: '{name}，歡迎光臨umi的世界',
}

en-US.js`

export default {//前面即ID，后面顯示的內(nèi)容
? WELCOME_TO_UMI_WORLD: '{name}, welcome to umi\'s world',
}

使用

import { formatMessage, setLocale, getLocale, FormattedMessage } from 'umi/locale'
//setLocale('en-US') 設(shè)置默認(rèn)
//getLocale 獲取當(dāng)前語言
//setLocale 切換語言傳參文件夾名字
//FormattedMessage 通過id渲染
//標(biāo)簽---主要

// 設(shè)置為 en-US
setLocale('en-US')

// 獲取當(dāng)前語言
console.log(getLocale() === 'en-US')
//使用標(biāo)簽 此處id為en-us文件夾和zh-cn文件夾的id， id后面的內(nèi)容會(huì)自動(dòng)顯示到標(biāo)簽上
<FormattedMessage id="WELCOME_TO_UMI_WORLD" }/>
//------次要了解
// 獲取指定文字的多語言版本
const formatedText = formatMessage({
? id: 'WELCOME_TO_UMI_WORLD'
}, {
? name: '小伙子',
})

console.log(formatedText === '小伙子，歡迎光臨umi的世界')
// 渲染一個(gè)文字標(biāo)簽
function Example() {
? return <FormattedMessage id="WELCOME_TO_UMI_WORLD" values={{ name: '小伙子' }} />
}