使用vue、react可以前后端分離開發，然后多語言問題怎么辦

leonardofed 發布于2019-08-21 17:18 / 1556人閱讀

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

multi-lang-js

前端JavaScript多語言加載器，前端部署好各個語言的json或txt語言包，可結合vue等使用。

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

demo示例

    
        {{ langContent.title }}
        {{ langContent.name1 }}
        {{ langContent.name2 }}
        {{ langContent.name3 }}

初始化multiLang.init()

參數名	類型	說明
path	str	翻譯文本的相對路徑，這里我把所有翻譯文本放到css文件夾下
dataType	str	值為 txt 或者json。可忽略此參數，默認為json，值為txt時，則返回的是txt文本
name	obj	各個語言對應加載的翻譯文本，屬性名不可改，對應的文本名字可以改
callback	fun	回調的第一個參數是加載到的json(或者文本)數據，第二個數據是當前客戶端的語言名字

設置語言multiLang.setLang(langname,callback)

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

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

參數名	類型	說明
langname	str	必須設置，你要設置的語言名
callback	function	可選的回調函數

測試

初始化判斷當前是何種語言的邏輯：先查瀏覽器地址欄lang 參數，其次查 localStorage.lang的值，最后看瀏覽器語言

所以為了測試預覽，你可以在地址后帶入參數，lang=en(你想要的語言 ru、ko、th等)。

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

說明

如果你配置的name中，沒有（比如當前埃及用戶訪問），則默認會加載英文的顯示。

前端多語言加載器的特點

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

npm install multi-lang-js

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

GPU云服務器云服務器前后端分離開發阿里云前后端分離項目怎么部署服務器前后端分離 android多語言開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89361.html

Vue ui 大法哪家強？

Element iView Vuex Mint UI Vant cube-ui，對比六大 vue ui 組件庫，選中最適合的那個。 Element(pc) 介紹 & 版本餓了么前端團隊開發的桌面端組件庫，當前最新版本：2.4.8 Star：32.067k 項目特色團隊維護支持三個版本：vue、react、angular 支持 Nuxt.js 常規支持：多語言、自定義主題、按需引入、內置...

Edison 2019-08-23 12:45 評論0 收藏0
用koa開發一套內容管理系統（CMS），支持javascript和typescript雙語言

摘要：而在國內確實用的人太少，國內的主流服務端語言都被霸占。因此，在進行調研和諸多權衡后，團隊選擇了作為第二支持語言。整體上使用開發，也用了一些的特性，之所以用，是因為對于項目的開發和維護有極大的益處。初衷 lin-cms是我們林間有風團隊開源的一款CMS，它采用目前主流的前后端分離的架構，前端使用vue作為基礎框架，后端選擇了我們團隊大量實踐使用的flask作為基礎框架。 lin-cms...

lncwwn 2019-08-23 15:24 評論0 收藏0
項目經驗總結

摘要：項目中前端開發問題經驗總結下的安全限制問題問題描述數據看板中的數據大部分都是實時數據或前一天統計的歷史數據，因此這邊后端考慮采用來實時和定時推送數據來保證數據的實時性和有效性。項目中前端開發問題經驗總結 ie下websocket的安全限制問題問題描述：數據看板中的數據大部分都是實時數據或前一天統計的歷史數據，因此這邊后端考慮采用websocket來實時和定時推送數據來保證數據的實時...

William_Sang 2019-08-23 15:56 評論0 收藏0
編寫簡單i18n庫

摘要：因為兩次的開發維護體驗產生了對比，使我產生了不小的興趣假設一個簡單的頁面需要多語言。兩個簡單的區別就是和替換的區別。樣式模式其實就是簡單的切換。當修改的某個值時，會觸發對應的，并發射信號通知節點去更新。 i18n是什么？i18n（其來源是英文單詞internationalization的首末字符i和n，18為中間的字符數）是國際化的簡稱。前言第一次接觸多語言是用野生javascri...

txgcwm 2019-08-26 11:46 評論0 收藏0
編寫簡單i18n庫

摘要：因為兩次的開發維護體驗產生了對比，使我產生了不小的興趣假設一個簡單的頁面需要多語言。兩個簡單的區別就是和替換的區別。樣式模式其實就是簡單的切換。當修改的某個值時，會觸發對應的，并發射信號通知節點去更新。 i18n是什么？i18n（其來源是英文單詞internationalization的首末字符i和n，18為中間的字符數）是國際化的簡稱。前言第一次接觸多語言是用野生javascri...

DevWiki 2019-08-01 18:35 評論0 收藏0