vue项目中vue-i18n和element-ui国际化开发实现过程


Posted in Javascript onApril 25, 2018

在vue构建的项目中,我们常用element-ui插件,在我的博客前面有讲述,具体怎么用vue-i18n插件进行国际化开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行。element-ui插件自身也提供了语言包。具体的配置和使用方法参考如下:

默认你已构建好了一个vue项目,在vue项目中安装vue-i18n以及element-ui插件

cnpm i vue-i18n --save-dev 
cnpm i element-ui --save-dev

在项目文件中如下图,创建语言包文件夹i18n文件夹

vue项目中vue-i18n和element-ui国际化开发实现过程

在main.js用引入i18n.js,以及引入element-ui插件

import Vue from 'vue' 
import App from './App' 
import router from './router' 
// element-ui 
import Element from 'element-ui' 
import 'element-ui/lib/theme-chalk/index.css' 
Vue.use(Element) 
// vuei18n 
import i18n from './i18n/i18n' 
Vue.config.productionTip = false 
/* eslint-disable no-new */ 
new Vue({ 
 el: '#app', 
 router, 
 i18n, 
 components: { 
 App 
 }, 
 template: '<App/>' 
})

在i18n.js中

import Vue from 'vue' 
import locale from 'element-ui/lib/locale' 
import VueI18n from 'vue-i18n' 
import messages from './langs' 
Vue.use(VueI18n) 
const i18n = new VueI18n({ 
 locale: localStorage.lang || 'cn', 
 messages, 
}) 
locale.i18n((key, value) => i18n.t(key, value)) 
export default i18n

文件夹langs中

index.js

import en from './en'; 
import cn from './cn'; 
export default { 
 en: en, 
 cn: cn 
}

en.js

import enLocale from 'element-ui/lib/locale/lang/en' 
const en = { 
 message: { 
 'mes': 'hello', 
 }, 
 ...enLocale 
} 
export default en;

cn.js

import enLocale from 'element-ui/lib/locale/lang/zh-CN' 
const cn = { 
 message: { 
 'mes': '你好', 
 }, 
 ...enLocale 
} 
export default cn;

通过上述方式的设置,就能完成vue-i18n和element-ui的国际化开发。

总结

以上所述是小编给大家介绍的vue项目中vue-i18n和element-ui国际化开发实现过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
用js实现的抽象CSS圆角效果!!
May 03 Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
javascript中的delete使用详解
Apr 11 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
JS封装cavans多种滤镜组件
Feb 15 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 #Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 #Javascript
详解Vue.js中.native修饰符
Apr 24 #Javascript
Vue 动态设置路由参数的案例分析
Apr 24 #Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 #Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 #Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 #Javascript
You might like
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
php+javascript的日历控件
2009/11/19 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
python 读取DICOM头文件的实例
2018/05/07 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
python 实现两个线程交替执行
2020/05/02 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
英国精品买手店:Browns Fashion
2016/09/29 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
财务会计专业推荐信
2013/11/30 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
小学远程教育工作总结
2015/08/13 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
vue打包时去掉所有的console.log
2022/04/10 Vue.js