成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用vue、react可以前后端分離開發(fā),然后多語言問題怎么辦

leonardofed / 1583人閱讀

摘要:前端多語言加載器,前端部署好各個(gè)語言的或語言包,可結(jié)合等使用。多語言,不就從瀏覽器里拿信息么,前端也可以。借此做一個(gè)前端語言包加載器。前端多語言加載器的特點(diǎn)切換語言,不用刷新頁面,語言包的一下就替換了。

multi-lang-js

前端JavaScript多語言加載器,前端部署好各個(gè)語言的json或txt語言包,可結(jié)合vue等使用。

多語言,不就從瀏覽器navigator.language里拿信息么,前端也可以。借此做一個(gè)前端語言包加載器。

demo示例
    

{{ langContent.title }}

{{ langContent.name1 }}

{{ langContent.name2 }}

{{ langContent.name3 }}

初始化multiLang.init()
參數(shù)名 類型 說明
path str 翻譯文本的相對路徑,這里我把所有翻譯文本放到css文件夾下
dataType str 值為 txt 或者json??珊雎源藚?shù),默認(rèn)為json,值為txt時(shí),則返回的是txt文本
name obj 各個(gè)語言對應(yīng)加載的翻譯文本,屬性名不可改,對應(yīng)的文本名字可以改
callback fun 回調(diào)的第一個(gè)參數(shù)是加載到的json(或者文本)數(shù)據(jù),第二個(gè)數(shù)據(jù)是當(dāng)前客戶端的語言名字
設(shè)置語言multiLang.setLang(langname,callback)

如果你覺得multiLang.setLang 使用麻煩,也可以:localStorage.lang=langname,這種寫法

注意:設(shè)置語言,會讓全站語言都立馬改動,demo可參考github上的頁面。
開多個(gè)頁簽試試 https://diyao.github.io/multi...

參數(shù)名 類型 說明
langname str 必須設(shè)置,你要設(shè)置的語言名
callback function 可選的回調(diào)函數(shù)
測試

初始化判斷當(dāng)前是何種語言的邏輯:先查瀏覽器地址欄lang 參數(shù),其次查 localStorage.lang的值,最后看瀏覽器語言

所以為了測試預(yù)覽,你可以在地址后帶入?yún)?shù),lang=en(你想要的語言 ru、ko、th等)。

https://diyao.github.io/multi...

說明

如果你配置的name中,沒有(比如當(dāng)前埃及用戶訪問),則默認(rèn)會加載英文的顯示。

前端多語言加載器的特點(diǎn)

切換語言,不用刷新頁面,語言包biu的一下就替換了。某個(gè)頁簽切換語言,全站其他頁簽biu的一下,全都換了

npm install multi-lang-js

https://www.npmjs.com/package...

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/89361.html

相關(guān)文章

  • Vue ui 大法哪家強(qiáng)?

    Element iView Vuex Mint UI Vant cube-ui,對比六大 vue ui 組件庫,選中最適合的那個(gè)。 Element(pc) 介紹 & 版本 餓了么前端團(tuán)隊(duì)開發(fā)的桌面端組件庫,當(dāng)前最新版本:2.4.8 Star:32.067k 項(xiàng)目特色 團(tuán)隊(duì)維護(hù) 支持三個(gè)版本:vue、react、angular 支持 Nuxt.js 常規(guī)支持:多語言、自定義主題、按需引入、內(nèi)置...

    Edison 評論0 收藏0
  • 用koa開發(fā)一套內(nèi)容管理系統(tǒng)(CMS),支持javascript和typescript雙語

    摘要:而在國內(nèi)確實(shí)用的人太少,國內(nèi)的主流服務(wù)端語言都被霸占。因此,在進(jìn)行調(diào)研和諸多權(quán)衡后,團(tuán)隊(duì)選擇了作為第二支持語言。整體上使用開發(fā),也用了一些的特性,之所以用,是因?yàn)閷τ陧?xiàng)目的開發(fā)和維護(hù)有極大的益處。 初衷 lin-cms是我們林間有風(fēng)團(tuán)隊(duì)開源的一款CMS,它采用目前主流的前后端分離的架構(gòu),前端使用vue作為基礎(chǔ)框架,后端選擇了我們團(tuán)隊(duì)大量實(shí)踐使用的flask作為基礎(chǔ)框架。 lin-cms...

    lncwwn 評論0 收藏0
  • 項(xiàng)目經(jīng)驗(yàn)總結(jié)

    摘要:項(xiàng)目中前端開發(fā)問題經(jīng)驗(yàn)總結(jié)下的安全限制問題問題描述數(shù)據(jù)看板中的數(shù)據(jù)大部分都是實(shí)時(shí)數(shù)據(jù)或前一天統(tǒng)計(jì)的歷史數(shù)據(jù),因此這邊后端考慮采用來實(shí)時(shí)和定時(shí)推送數(shù)據(jù)來保證數(shù)據(jù)的實(shí)時(shí)性和有效性。 項(xiàng)目中前端開發(fā)問題經(jīng)驗(yàn)總結(jié) ie下websocket的安全限制問題 問題描述:數(shù)據(jù)看板中的數(shù)據(jù)大部分都是實(shí)時(shí)數(shù)據(jù)或前一天統(tǒng)計(jì)的歷史數(shù)據(jù),因此這邊后端考慮采用websocket來實(shí)時(shí)和定時(shí)推送數(shù)據(jù)來保證數(shù)據(jù)的實(shí)時(shí)...

    William_Sang 評論0 收藏0
  • 編寫簡單i18n庫

    摘要:因?yàn)閮纱蔚拈_發(fā)維護(hù)體驗(yàn)產(chǎn)生了對比,使我產(chǎn)生了不小的興趣假設(shè)一個(gè)簡單的頁面需要多語言。兩個(gè)簡單的區(qū)別就是和替換的區(qū)別。樣式模式其實(shí)就是簡單的切換。當(dāng)修改的某個(gè)值時(shí),會觸發(fā)對應(yīng)的,并發(fā)射信號通知節(jié)點(diǎn)去更新。 i18n是什么?i18n(其來源是英文單詞internationalization的首末字符i和n,18為中間的字符數(shù))是國際化的簡稱。 前言 第一次接觸多語言是用野生javascri...

    txgcwm 評論0 收藏0
  • 編寫簡單i18n庫

    摘要:因?yàn)閮纱蔚拈_發(fā)維護(hù)體驗(yàn)產(chǎn)生了對比,使我產(chǎn)生了不小的興趣假設(shè)一個(gè)簡單的頁面需要多語言。兩個(gè)簡單的區(qū)別就是和替換的區(qū)別。樣式模式其實(shí)就是簡單的切換。當(dāng)修改的某個(gè)值時(shí),會觸發(fā)對應(yīng)的,并發(fā)射信號通知節(jié)點(diǎn)去更新。 i18n是什么?i18n(其來源是英文單詞internationalization的首末字符i和n,18為中間的字符數(shù))是國際化的簡稱。 前言 第一次接觸多語言是用野生javascri...

    DevWiki 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<