前言

这个系列主要是记录一下最近研究的多语言配置，主要供新手学习使用，大牛可以不用看了

目录

• 没有切换语言功能

JQuery实现

懒得看的同学可以直接

基本思路

• 布局时就给需要多语言的标签加个属性
• 通过同步的ajax引入语言包
• 判断用户语言类型
• 循环遍历DOM,修改innerHTML

布局准备

simple Translation
复制代码

引入语言包

function loadDict() {    $.ajax({        type: "get",        url: "./language.json",        dataType: "json",        async: false, //同步加载文件        success: function(response) {            window.langData = response //挂载到全局对象下        }    });}复制代码

简单的语言包模板

[{        "ID": "title",        "Chinese": "simple Translation",        "English": "simple Translation"    },    {        "ID": "content",        "Chinese": "这是一个简单的页面翻译工具，或者叫国际化工具。主要功能就是为网站提供多语言支持",        "English": "This is exmple page for simple Translation which a simple tools to translate your web Page"    },    {        "ID": "li1",        "Chinese": "使用简单",        "English": "easy to use and learn"    }]复制代码

判断用户语言类型

//传入langCode，实现用户可以自己切换语言function getUserLanguage(langCode) {    var lang = navigator.language || navigator.userLanguage;    var result = langCode ? langCode : lang.toLocaleLowerCase().substr(0, 2);    //这里可以根据你的语言包自己自定义    var obj = {        "zh": "Chinese",        "en": "English",        "de": "Germany",        "ru": "Russia",        "fr": "France",        "ko": "Korea",        "pt": "Portague",        "ja": "Japanese",        "es": "Spanish",        "it": "Italy"    }    return !obj[result] ? "Chinese" : obj[result]}复制代码

循环遍历DOM

function translate(langCode) {    var lang = getUserLanguage(langCode),        dict = window.langData,        len = window.langData.length    $('[data-lang]').each(function() {        var id = $(this).attr('data-lang-id'),            tag = this.tagName.toLowerCase()        for (var i = 0; i < len; i++) {            console.log(dict[i][lang])            if (dict[i]['ID'] == id) {                if (dict[i][lang] == null) { break }                if (tag == 'input') { $(this).val(dict[i][lang]); break; }                $(this).html(dict[i][lang])            }        }    });}复制代码

这里应该都能看懂，唯一容易出问题的地方就是同步加载语言那里，我使用了JQuery 1.8.3,是支持同步的，如果不支持，你可以把改成原生ajax或者干脆改成一个js文件

Vue的简单实现

由于目前需要的功能还没有切换语言，所以写了一个一次性改变语言的功能

基本思路

• 准备语言包JS
• 在main.js里引入，判断语言，同时挂载到Vue对象下
• 在各个组件中直接调取

准备语言包

还是不喜欢用json格式，因为ajax请求总是异步的，不好控制 我用了这个模板

const lang={  //中文简体  zhj:{    tabBar:{
   //底栏      a:"获得粉丝",      b:"获得点赞",      c:"购买VIP",      d:"更多"    }   }  }  export default lang复制代码

引入并加载

引入很简单import lang from './assets/js/lang' 然后，我把它挂载到了根Vue对象中

new Vue({  el: '#app',  router,  components: { App },  render:h => h(App),  created() {    // 载入多语言    this._intiLang()  },  data(){    return{      lang:{}    }  },  methods: {    getUserLang(){ //获取用户语言      var lang = navigator.language||navigator.userLanguage;      var result=lang.toLocaleLowerCase().substr(0,2);      if(result=='zh'){          if(lang.toLocaleLowerCase()=='zh-cn'){
   //中文简体              result="zhj"          }else{              result="zhf" //中文繁体          }      }      return result    },    _intiLang(){      let langName=this.getUserLang()      let data = lang[langName] ?  lang.en : lang[langName]      this.lang=data    },    changeLang(type){ //提取多语言的内容      return !this.lang[type]?'lang':this.lang[type]    }  },})复制代码

子组件中调用

    复制代码

这样就实现了一个简单的多语言，在子组件中只要通过this.$root.changeLang()这个函数来取值就行了。当然这个方法还有很多不足，适用面也很窄。下一步准备去研究i18n,如果抽得出时间，我打算自己写一个vue插件