關於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)
           }
},