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 相关文章推荐
JS 树形递归实例代码
May 18 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
js数组实现权重概率分配
Sep 12 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
js如何验证密码强度
Mar 18 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
基于pear auth实现登录验证
2010/02/26 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
php strftime函数的详细用法
2018/06/21 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
浅谈Python中copy()方法的使用
2015/05/21 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
python实现最大优先队列
2019/08/29 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
Python图片的横坐标汉字实例
2019/12/04 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
Python如何实现远程方法调用
2020/08/07 Python
Django model class Meta原理解析
2020/11/14 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
UNIX文件名称有什么规定
2013/03/25 面试题
30岁生日感言
2014/01/25 职场文书
房地产推广策划方案
2014/05/19 职场文书
2014年应急工作总结
2014/12/11 职场文书
可怜妈妈观后感
2015/06/09 职场文书
Python中字符串对象语法分享
2022/02/24 Python