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 Excel操作知识点
Apr 24 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 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下通过POST还是GET来传值
2008/06/05 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
php文件上传类完整实例
2016/05/14 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
PHP学习笔记之session
2018/05/06 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
js 作用域和变量详解
2017/02/16 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
初学Python函数的笔记整理
2015/04/07 Python
Python检测生僻字的实现方法
2016/10/23 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Python实现壁纸下载与轮换
2020/10/19 Python
python各种excel写入方式的速度对比
2020/11/10 Python
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
领导视察欢迎词
2014/01/15 职场文书
学术会议通知
2015/04/15 职场文书
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python