使用vue、react能夠先後端分離開發，而後多語言問題怎麼辦

multi-lang-js

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

多語言，不就從瀏覽器navigator.language裏拿信息麼，前端也能夠。藉此作一個前端語言包加載器。

demo示例

<div id="app_lang">
        <h1>{{ langContent.title }}</h1>
        <h1>{{ langContent.name1 }}</h1>
        <h1>{{ langContent.name2 }}</h1>
        <h1>{{ langContent.name3 }}</h1>
    </div>
<script src="js/vue.min.js"></script>
<script src="js/multi-lang.js"></script>
<script>
var vue_app = new Vue({
        el: '#app_lang',
        data: {
                langContent: {
                    //
                }
        }
})
var multiLang = new MultiLang() // 1：
//2：import multiLang from 'multi-lang-js';
//or
//3：var multiLang = require('multi-lang-js');
multiLang.init({
    path: 'css/',
    name: {
        'en': 'lang_en.txt',
        'cn': 'lang_cn.txt',
        'tw': 'lang_cn.txt',
        'th': 'lang_th.txt',
        'vn': 'lang_vn.txt',
        'ru': 'lang_ru.txt',
        'ko': 'lang_ko.txt'
    },
    callback: function (data, langName) {
        vue_app.langContent = data
        if (langName === 'en') {
            //某個語言你須要再特殊處理的話
        }
    }
})
</script>

初始化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...