在配合Element-UI一起使用时,会有2个问题:# # # #(1),页面刷新后,通过按钮切换的语言还原成了最初的语言,无法保存# # # #(2),框架内部自带的提示文字无法更改,比如像时间选择框内部中的提示文字
<>强关于第一个问题,可以在初始化VueI18n实例时,通过localStorage来为语言环境对象赋值
在切换语言的时候可以缓存不同的语言选项,并且可以长期保存,不会因为刷新网页而改变区域的属性值
const i18n=new VueI18n({地区:localStorage.getItem(“区域”)| |“zh型”,消息})
关于第二个问题,更改元素组件内部语言,这里还涉及到手动处理vue-i18n@6。x兼容性问题。http://element-cn.eleme.io//偻丫隽讼晗附樯?这里依葫芦画瓢跟着实现一下
# # # i18n。js进口Vue Vue”从“vue-i18n”进口VueI18n进口地区从“element-ui/lib/地区”;从“进口zh型。/语言/zh型进口en。/语言/en的进口enLocale element-ui/lib/地区/lang/en”从“进口zhLocale element-ui/lib/地区/lang/应用的
Vue.use (VueI18n)
const消息={en:对象。zh型:enLocale分配(en),对象。分配(zh型,zhLocale)}
console.log (messages.zh)
const i18n=new VueI18n({地区:localStorage.getItem(“区域”)| |“zh型”,消息})
语言环境。i18n(关键字,值)=比;i18n。t(关键字,值))//为了实现元素插件的多语言切换
出口默认i18n
按照如上把国际化文件都整合到一起,避免主要。js中大段引入相关代码.main。js中与国际化相关的就只剩两行代码
# # #主要。js从“进口i18n。i18n/i18n//1行
窗口。应用=new Vue ({el: #应用,路由器,商店,i18n,//2行组件:{应用},模板:"})
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -源码如下- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
//工程本地国际化
从“进口locale_zh_CN。/lang/应用的
从“进口locale_zh_TW。/lang/zh-TW”
从“进口locale_en_US。/lang/en - us '
从“进口locale_ko_KR。/lang/ko-KR”//ElementUI国际化
从“进口element_locale element-ui/lib/语言环境'
从“进口element_zh_CN element-ui/lib/地区/lang/应用的
从“进口element_zh_TW element-ui/lib/地区/lang/zh-TW”
从“进口element_en_US element-ui/lib/地区/lang/en”
从“进口element_ko_KR element-ui/lib/地区/lang/ko’
从“Vue”进口Vue
从“vue-i18n”进口VueI18n
Vue.use (VueI18n)//将各自的国际化文件合并抛出(后期公共组件等插件的国际化文件也需要考虑)
const消息={
zh_CN:对象。分配(locale_zh_CN element_zh_CN),
zh_TW:对象。分配(locale_zh_TW element_zh_TW),
en_US:对象。分配(locale_en_US element_en_US),
ko_KR:对象。分配(locale_ko_KR element_ko_KR)
}//i18n插件默认给中文
const i18n=new VueI18n ({
地区:window.localStorage.getItem (WEBFRONT_LANG) | |“zh_CN”,
消息
})//为了实现元素插件的多语言切换
element_locale。i18n(关键字,值)=比;i18n。t(关键字,值))
出口默认i18n
以上所述是小编给大家介绍的vue-i18n结合Element-ui的配置方法,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
