关于vue和element ui的国际化

　　因为公司需求近日一直在做国际化处理，

　　首先，我们用的是vue的单文件组件，实现国际化是在写好的一个文件组件里面vue_min.js里，而且它相当于一个js的模块，在每一个单文件的组件里面使用。

　　遇见的第一个问题国际化失败，只显示自己定义的json文件国际化。而且element ui的的国际化不显示，

解决的方案就是，

1.引入的时候应该从新引入

import enLocale from 'element-ui/lib/locale/lang/en' 
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' 
import locale from 'element-ui/lib/locale'

 

element ui的文件，并且在main.js里初始化进来

import VueI18n from 'vue-i18n'
import ElementUI from "element-ui"
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import locale from 'element-ui/lib/locale'

Vue.use(VueI18n)
Vue.use(ElementUI,{enLocale});

var i18n = new VueI18n({
  locale:"zh-CN",
  messages:{
    "zh-CN":require("./assets/i18n/zh-cn.json"),
    "en-US":require("./assets/i18n/en.json")
  }
})

 

2.下面是.vue文件里面的操作了

　　　通过事件进行触发

　　　　 <a  @click="setLang('zh-CN')">中文/</a>
        　　<a  @click="setLang('en-US')">EngLish</a>

　　  方法

   　

setLang(v){
      if(v==='en-US'){

　　　　//自己定义的国际化文件是json格式的
       this._i18n.locale = "en-US";

　　　　//引用的就是element的国际化的内置对象
      　　locale.use(enLocale)
      }else{
          this._i18n.locale = "zh-CN";
          locale.use(zhLocale)
      }
　　　 //把国际化的信息写到cookie里面，防止页面的刷新和f5

　　　//这里也可以用vuex实现因为项目问题我们采用了cookie这种办法
     $.cookie("language", this._i18n.locale === "" ?this._i18n.locale = "zh-CN" : this._i18n.locale,{ expires: 1, path: '/' });
}        

 

3.vue的混合vue_min.js

利用vue的混合实现了有一点点类似于java里面的面向切面编程的思想

import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import locale from 'element-ui/lib/locale'

同样的要引入这些东西，不然会显示找不到  locale。

然后就是初始化的时候必须要调用。

  initPage : function(){
            
            this.language();
           
   }

//语言的动态切换，防止刷新

 language : function(){
　　　//从cookie里面拿出来赋值
           this.internationalization = $.cookie("language");
           if(this.internationalization ==='en-US'){
              this._i18n.locale = "en-US";
              locale.use(enLocale)
           }else{
              this._i18n.locale = "zh-CN";
              locale.use(zhLocale)
           }
},