react之umi配置國際化語言locale的踩坑記錄
umi配置國際化語言locale的踩坑
因為項目創(chuàng)建的比較早,用的是umi2+版本,修改默認(rèn)語言是英文,官方說直接改配置的defalut,但是我改完并不生效,可能是我的版本呢原因,找了好久,總算找到解決辦法的方法了。
其中我的項目版本使用的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時,用navigator.language的值作為默認(rèn)語言 ? ? ? ? ? antd: true // 是否啟用antd的<LocaleProvider /> ? ? ? ? } ? ? ? } ? ? ] ? ] };
目錄及約定
```javascript ├── dist/ ? ? ? ? ? ? ? ? ? ? ? ? ? ├── mock/ ? ? ? ? ? ? ? ? ? ? ? ?? └── src/ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ├── layouts/index.js ? ? ? ? ? ? ? ├── pages/ ? ? ? ? ? ? ? ? ? ? ? ? └── locales ? ? ? ? ? ? ? // 多語言文件存放目錄,里面的文件會被umi自動讀取 ? ? ? ? ├── 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)容會自動顯示到標(biāo)簽上 <FormattedMessage id="WELCOME_TO_UMI_WORLD" }/> //------次要了解 // 獲取指定文字的多語言版本 const formatedText = formatMessage({ ? id: 'WELCOME_TO_UMI_WORLD' }, { ? name: '小伙子', }) console.log(formatedText === '小伙子,歡迎光臨umi的世界') // 渲染一個文字標(biāo)簽 function Example() { ? return <FormattedMessage id="WELCOME_TO_UMI_WORLD" values={{ name: '小伙子' }} /> }
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
React路由的history對象的插件history的使用解讀
這篇文章主要介紹了React路由的history對象的插件history的使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10React?實(shí)現(xiàn)具備吸頂和吸底功能組件實(shí)例
這篇文章主要為大家介紹了React?實(shí)現(xiàn)具備吸頂和吸底功能組件實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02React router cache route實(shí)現(xiàn)緩存頁面流程介紹
react-router自身沒有路由緩存的特性,在5.x版本之前,我們可以基于react-router-cache-route來實(shí)現(xiàn)路由緩存功能。但是react-router 6.x在實(shí)現(xiàn)上做了比較大的變化,react-router-cache-route沒有提供相應(yīng)的支持2023-01-01React css-in-js基礎(chǔ)介紹與應(yīng)用
隨著React、Vue等支持組件化的MVVM前端框架越來越流行,在js中直接編寫css的技術(shù)方案也越來越被大家所接受。為什么前端開發(fā)者們更青睞于這些css-in-js的方案呢,下面帶你了解它2022-09-09