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

 更新时间:2018年04月25日 10:00:12   作者:littlepath  
这篇文章主要介绍了vue项目中vue-i18n和element-ui国际化开发实现过程,非常不错,具有参考借鉴价值,需要的朋友可以参考下

在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文件夹

在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国际化开发实现过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue vuex vue-rouert后台项目——权限路由(适合初学)

    vue vuex vue-rouert后台项目——权限路由(适合初学)

    这篇文章主要介绍了vue vuex vue-rouert后台项目——权限路由,通过本文可以很清除的捋清楚vue+vuex+vue-router的关系,本版本非常简单,适合初学者,需要的朋友可以参考下
    2017-12-12
  • 浅谈关于.vue文件中style的scoped属性

    浅谈关于.vue文件中style的scoped属性

    本篇文章主要主要介绍了浅谈关于.vue文件中style的scoped属性,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Vue2中实现dialog的封装方式

    Vue2中实现dialog的封装方式

    这篇文章主要介绍了Vue2中实现dialog的封装方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • vue2.0实现导航菜单切换效果

    vue2.0实现导航菜单切换效果

    这篇文章主要为大家详细介绍了vue2.0实现导航菜单切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • vue实现可改变购物数量的购物车

    vue实现可改变购物数量的购物车

    这篇文章主要为大家详细介绍了vue实现可改变购物数量的购物车,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • 浅谈Vue中的this.$store.state.xx.xx

    浅谈Vue中的this.$store.state.xx.xx

    这篇文章主要介绍了Vue中的this.$store.state.xx.xx用法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-09-09
  • vue实现商品列表的添加删除实例讲解

    vue实现商品列表的添加删除实例讲解

    在本篇内容里小编给大家分享的是关于vue实现商品列表的添加删除实例讲解,有兴趣的朋友们可以参考下。
    2020-05-05
  • 在vue中使用echarts实现飞机航线水滴图词云图效果

    在vue中使用echarts实现飞机航线水滴图词云图效果

    这篇文章主要介绍了在vue中使用echarts实现飞机航线 水滴图 词云图,通过引入中国地图JS文件,会自动注册地图,文中结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • Vue3导出pdf文件详细方案

    Vue3导出pdf文件详细方案

    这篇文章主要给大家介绍了关于Vue3导出pdf文件的相关资料,最近项目有个需求,将系统统计的数据生成分析报告,然后可以导出成PDF,这里给大家总结下,需要的朋友可以参考下
    2023-08-08
  • vue3中effect函数到底是什么详解

    vue3中effect函数到底是什么详解

    Effect几乎是Vue3.0中最重要的一个功能了,计算属性监听函数都是基于effect实现的,下面这篇文章主要给大家介绍了关于vue3中effect函数到底是什么的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06

最新评论