Vue.JS项目同时使用Element-UI与vue-i18n时实现国际化的方案

之前我们谈到过使用vue-i18n实现国际化的方案，但是这个方案的缺点是没有结合Element-UI的国际化，也就是使用了Element-UI的话，Element-UI自带的组件里的文字无法实现国际化，那么应该如何解决？下面介绍vue项目同时使用Element-UI与vue-i18n时实现国际化的经验。
main.js配置：

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import VueI18n from 'vue-i18n'
// 导入Element-UI 语言包
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'Vue.use(VueI18n);// 注册i18n实例并引入我们语言文件，将Element-UI的语言包与我们的合并
// 使用到es6的Object.assign()方法
const i18n = new VueI18n({locale: 'zh',messages:{'en':Object.assign(require('./lang/en.json'), enLocale),'zh':Object.assign(require('./lang/zh.json'), zhLocale)},
});Vue.use(ElementUI, {i18n: (key,value) => i18n.t(key,value)
});Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',i18n,components: { App },template: '<App/>'
})

除了main.js的配置不一样，使用方法与之前介绍的一致，与之前不同的是这次连Element-UI组件自带的文字也会随着语言切换而切换，使用方法如有疑问请参考之前写的文章，文章有对语言包格式、使用方法等介绍：vue项目如何实现国际化？分享一下基于vue-i18n实现国际化的经验

Vue.JS项目同时使用Element-UI与vue-i18n时实现国际化的方案相关推荐

创建基于Webpack的Vue.js项目
创建基于Webpack的Vue.js项目本文目录: 一.Webpack简介二.创建基于Webpack的Vue.js项目 1.前提条件 (1).检查node 和npm版本信息 (2).升级你的 No ...
php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
vue.js项目中配置mapbox可视化地图api
1. 本地创建vue.js项目 cmd或者terminal中运行下面的命令开出vue project manager,之后按照所需要配置创建vue.js项目 vue ui 2. 在mapbox官网上申 ...
第5章　运维和发布Vue.js项目
第5章运维和发布Vue.js项目一般传统公司特别喜欢一个角色用一个人,如在生产流水线上,一个工人只负责拧螺丝,另一个工人只负责喷漆.很多软件公司也是这样,有人专门负责编写代码,有人专门负责运维.但 ...
宝塔面板部署nuxt_MacOS下创建及部署vue.js项目（及Nuxt.js、PM2等相关流程）
开发环境权限准备为避免后续流程出现权限不足的相关提示,首先在终端中输入以下代码检查当前系统是否已开启了对系统文件夹的保护: csrutil status 若结果为csrutil enabled,则 ...
vue.js项目中，关于element-ui完整引入、按需引入的介绍
element-ui引入方式,简单说来有两种:完整引入.按需引入首先谈一下npm安装element-ui的方法: cmd到项目目录,然后执行cmd命令:npm i element-ui -S稍等片刻 ...
本地如何安装运行多个vue.js项目？
如何安装多个vue.js项目? 在研究vue.js框架的时候,往往会从网站上搜一些别人已经写好的vue小项目,然后安装到本地,运行,查看浏览器的UI界面和功能效果. 本文着重讲解一下,如何安装已经下载 ...
初探 amaze-vue（基于vue.js封装的Amaze UI 组件库）
Amaze UI 是以移动优先(Mobile first)为理念,面向 HTML5 开发的国产优秀组件库.因官方未提供vue.js版本,而且民间一直对vue.js版本的 Amaze UI 组件库呼声很 ...
基于node.js开发环境下创建及开发vue.js项目的环境配置骤
基于node.js开发环境下创建开发vue.js项目的环境配置骤如下: 步骤一:安装node.js,安装完后运行node -v命令检安装node的查版本,判断是否安装成功.Npm是node.js包管理 ...

Vue.JS项目同时使用Element-UI与vue-i18n时实现国际化的方案

Vue.JS项目同时使用Element-UI与vue-i18n时实现国际化的方案相关推荐

最新文章

热门文章