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实现国际化的经验