vue-i18n结合Element-ui的配置方法
使用方法：
在配合Element-UI一起使用时，会有2个问题：####（1）、页面刷新后，通过按钮切换的语言还原成了最初的语言，无法保存####（2）、框架内部自带的提示文字无法更改，比如像时间选择框内部中的提示文字
关于第一个问题，可以在初始化VueI18n实例时，通过localStorage来为locale对象赋值
在切换语言的时候可以缓存不同的语言选项，并且可以长期保存，不会因为刷新网页而改变locale的属性值
consti18n=newVueI18n({locale:localStorage.getItem('locale')||'zh',messages})
关于第二个问题，更改Element组件内部语言，这里还涉及到手动处理vue-i18n@6.x兼容性问题。http://element-cn.eleme.io/#/...官网已经做了详细介绍，这里依葫芦画瓢跟着实现一下
###i18n.jsimportVuefrom'vue'importVueI18nfrom'vue-i18n'importlocalefrom'element-ui/lib/locale';importzhfrom'./langs/zh'importenfrom'./langs/en'importenLocalefrom'element-ui/lib/locale/lang/en'importzhLocalefrom'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n)
constmessages={en:Object.assign(en,enLocale),zh:Object.assign(zh,zhLocale)}
console.log(messages.zh)
consti18n=newVueI18n({locale:localStorage.getItem('locale')||'zh',messages})
locale.i18n((key,value)=>i18n.t(key,value))//为了实现element插件的多语言切换
exportdefaulti18n
按照如上把国际化文件都整合到一起，避免main.js中大段引入相关代码。main.js中与i18n相关的就只剩两行代码
###main.jsimporti18nfrom'./i18n/i18n'//1行
window.app=newVue({el:'#app',router,store,i18n,//2行components:{App},template:''})
---------------------------源码如下--------------------------------------
//工程本地国际化
importlocale_zh_CNfrom'./lang/zh-CN'
importlocale_zh_TWfrom'./lang/zh-TW'
importlocale_en_USfrom'./lang/en-US'
importlocale_ko_KRfrom'./lang/ko-KR'
//ElementUI国际化
importelement_localefrom'element-ui/lib/locale'
importelement_zh_CNfrom'element-ui/lib/locale/lang/zh-CN'
importelement_zh_TWfrom'element-ui/lib/locale/lang/zh-TW'
importelement_en_USfrom'element-ui/lib/locale/lang/en'
importelement_ko_KRfrom'element-ui/lib/locale/lang/ko'
importVuefrom'vue'
importVueI18nfrom'vue-i18n'
Vue.use(VueI18n)
//将各自的国际化文件合并抛出(后期公共组件等插件的国际化文件也需要考虑)
constmessages={
zh_CN:Object.assign(locale_zh_CN,element_zh_CN),
zh_TW:Object.assign(locale_zh_TW,element_zh_TW),
en_US:Object.assign(locale_en_US,element_en_US),
ko_KR:Object.assign(locale_ko_KR,element_ko_KR)
}
//i18n插件默认给中文
consti18n=newVueI18n({
locale:window.localStorage.getItem('WEBFRONT_LANG')||'zh_CN',
messages
})
//为了实现element插件的多语言切换
element_locale.i18n((key,value)=>i18n.t(key,value))
exportdefaulti18n
总结
以上所述是小编给大家介绍的vue-i18n结合Element-ui的配置方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！