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 相关文章推荐
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
jquery图片切换实例分析
Apr 15 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 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中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
Python中的Descriptor描述符学习教程
2016/06/02 Python
Python中取整的几种方法小结
2017/01/06 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
python怎么调用自己的函数
2020/07/01 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
学生评语大全
2014/04/18 职场文书
村党支部换届选举方案
2014/05/02 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
社区娱乐活动方案
2014/08/21 职场文书
机关作风建设整改方案
2014/10/27 职场文书
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js