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实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 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 escape URL编码
2008/12/10 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
Python程序设计入门(3)数组的使用
2014/06/16 Python
python中类的一些方法分析
2014/09/25 Python
python中list列表的高级函数
2016/05/17 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
python变量的存储原理详解
2019/07/10 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
介绍一下gcc特性
2015/10/31 面试题
党校培训思想汇报
2014/01/03 职场文书
文秘求职信范文
2014/04/10 职场文书
销售人员工作自我评价
2014/09/21 职场文书
五年级学生期末评语
2014/12/26 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers