vue-i18n结合Element-ui的配置方法

作者: 梅Ren杏
来源: 51数据库
2021-09-02

使用方法：

在配合 element-ui 一起使用时，会有2个问题： ####（1）、页面刷新后，通过按钮切换的语言还原成了最初的语言，无法保存 ####（2）、框架内部自带的提示文字无法更改，比如像时间选择框内部中的提示文字

关于第一个问题，可以在初始化vuei18n实例时，通过 localstorage 来为 locale 对象赋值

在切换语言的时候可以缓存不同的语言选项，并且可以长期保存，不会因为刷新网页而改变locale 的属性值

const i18n = new vuei18n({ locale: localstorage.getitem('locale') || 'zh', messages })

关于第二个问题，更改element 组件内部语言，这里还涉及到手动处理兼容性问题。 ... 官网已经做了详细介绍，这里依葫芦画瓢跟着实现一下

 ###i18n.js import vue from 'vue' import vuei18n from 'vue-i18n' import locale from 'element-ui/lib/locale'; import zh from './langs/zh' import en from './langs/en' import enlocale from 'element-ui/lib/locale/lang/en' import zhlocale from 'element-ui/lib/locale/lang/zh-cn'
vue.use(vuei18n)
const messages = { en: object.assign(en, enlocale), zh: object.assign(zh, zhlocale) }
console.log(messages.zh)
const i18n = new vuei18n({ locale: localstorage.getitem('locale') || 'zh', messages })
locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换
export default i18n

按照如上把国际化文件都整合到一起，避免main.js 中大段引入相关代码。main.js 中与 i18n 相关的就只剩两行代码

###main.js import i18n from './i18n/i18n' // 1行
window.app = new vue({ el: '#app', router, store, i18n, // 2行 components: { app }, template: '' })

---------------------------源码如下--------------------------------------

// 工程本地 国际化
import locale_zh_cn from './lang/zh-cn'
import locale_zh_tw from './lang/zh-tw'
import locale_en_us from './lang/en-us'
import locale_ko_kr from './lang/ko-kr'
// elementui 国际化
import element_locale from 'element-ui/lib/locale'
import element_zh_cn from 'element-ui/lib/locale/lang/zh-cn'
import element_zh_tw from 'element-ui/lib/locale/lang/zh-tw'
import element_en_us from 'element-ui/lib/locale/lang/en'
import element_ko_kr from 'element-ui/lib/locale/lang/ko'
import vue from 'vue'
import vuei18n from 'vue-i18n'
vue.use(vuei18n)
// 将各自的 国际化文件合并 抛出 (后期公共组件等插件的 国际化文件也需要考虑)
const messages = {
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插件默认给中文
const i18n = new vuei18n({
locale: window.localstorage.getitem('webfront_lang') || 'zh_cn',
messages
})
// 为了实现element插件的多语言切换
element_locale.i18n((key, value) => i18n.t(key, value))
export default i18n

总结

以上所述是小编给大家介绍的vue-i18n结合element-ui的配置方法,希望对大家有所帮助