vue-i18n结合Element-ui的配置方法
程序员文章站
2023-12-15 20:57:28
使用方法:
在配合 element-ui 一起使用时,会有2个问题: ####(1)、页面刷新后,通过按钮切换的语言还原成了最初的语言,无法保存 ####(2)、框架内部...
使用方法:
在配合 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的配置方法,希望对大家有所帮助