关于vue和element ui的国际化

Posted 2020-10-05 夏天的水果

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

　　首先，我们用的是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‘

elemet 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_min.js

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.isUserLogin();
              // 调用获取用户信息
              this.getUserinfo();
              // 初始化header的退出
              this.initLogout();
            this.language();
              // 设置用户username
               //this.setUserName();
          },

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

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