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


Posted in Javascript onMay 20, 2019

使用方法:

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

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

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

const i18n = new VueI18n({ locale: localStorage.getItem('locale') || 'zh', messages })

关于第二个问题,更改Element 组件内部语言,这里还涉及到 手动处理 vue-i18n@6.x 兼容性问题。 http://element-cn.eleme.io/#/... 官网已经做了详细介绍,这里依葫芦画瓢跟着实现一下

###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的配置方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
javascript canvas实现雨滴效果
Jun 09 Javascript
JS实现选项卡效果的代码实例
May 20 #Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 #Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 #Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 #Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 #Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 #Javascript
vue-cli webpack配置文件分析
May 20 #Javascript
You might like
Destoon模板制作简明教程
2014/06/20 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Flask框架Flask-Login用法分析
2018/07/23 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
python 读取串口数据的示例
2020/11/09 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
JSF界面控制层技术
2013/06/17 面试题
小学教师的个人自我鉴定
2013/10/24 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
怎么写好自荐书
2014/03/02 职场文书
青年标兵事迹材料
2014/08/16 职场文书
环保项目建议书
2014/08/26 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
董事长岗位职责
2015/02/13 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技