前端js（vue）实现国际化

1.创建自己的语言包(Language.js)，并引入界面。

2.语言种类定义json格式，如中文(zh)，英文(en)，韩语(ko)。

var zh={

button:{

lg:"XX",

}

page:{

index:{

lg:"",

}

}

}

3.为语言定义一个初始值。

var languague = zh;

4.定义一个函数获取语言。
var getLanguage = function() {
    var language = localStorage.getItem("language");
    if(language) {
        return JSON.parse(language);
    } else {
        return zh;
    };
    
};

5.定义一个函数设置语言种类。

var setLanguage = function(lan) {
    console.log('lang' + lan)
    if(lan == "zh") {
        localStorage.setItem("language", JSON.stringify(zh));
        localStorage.setItem("name", 'zh');
    } else if(lan == "en") {
        localStorage.setItem("language", JSON.stringify(en));
        localStorage.setItem("name", 'en');
    }if (lan=='ko') {
        localStorage.setItem("language", JSON.stringify(ko));
        localStorage.setItem("name", 'ko');
    }
};

6.将Language.js 引入切换语言界面，在切换语言的时候使用setLanguage ()设置语言和修改导航界面的语言。

修改导航界面语言代码：

//底部导航更改
                var home=plus.webview.getLaunchWebview();
                home.evalJS("editLanguage()");    
                var all = plus.webview.all();
                //获取所有界面的，将需要修改的界面id，与all[i].id 做判断
                for(var i=0;i<all.length;i++){
                    //all[i].evalJS("editLanguage()");
                     if (all[i].id=="team.html") {
                         //执行 'team.html' 的editLanguage()
                             all[i].evalJS("editLanguage()");
                     }     }

team界面上的editLanguage

var editLanguage = function() {
      XX = getLanguage();//再次设置语言
    }

7.切换语言的界面代码：

var app=new Vue({
        el:"#app",
        data:{                 
            language:localStorage.getItem("name"),            
            lang:getLanguage()
        },
        mounted: function() {
            var getItemName=localStorage.getItem("name");
            this.lang=getLanguage();             
        },
        watch:{
            language:function(newval,oldval){                 
                this.lang=getLanguage();                 
            }
        }

}）

var set =function(){

 var home=plus.webview.getLaunchWebview();
                home.evalJS("editLanguage()");    
                var all = plus.webview.all();
                //获取所有界面的，将需要修改的界面id，与all[i].id 做判断
                for(var i=0;i<all.length;i++){
                    //all[i].evalJS("editLanguage()");
                     if (all[i].id=="team.html") {
                         //执行 'team.html' 的editLanguage()
                             all[i].evalJS("editLanguage()");
                     }     }

}

8.界面上使用v-text 绑定数据，数据很多时使用{{XX}}。