因为公司需求近日一直在做国际化处理，
首先，我们用的是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)
}
},