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