Vue项目国际化引入高版本的vue-i18n时与ElementUI组件国际化的兼容问题[已解决]

问题描述：

现在有一个大型的vue(“vue”: “^2.5.16”,)项目，引入了高版本的"vue-i18n": "^8.18.2"插件来实现国际化，同时项目中也用到了十几个ElementUI中的组件，现在，ElementUI中的组件国际化不兼容高版本的vue-i18n插件。

实际上要做什么操作：

项目用到的ElementUI组件有它自己的国际化语言包，项目中自己开发的组件也写了国际化语言包，要做的事就是把这两个资源包合在一起！

解决方案：

• 情况一

项目中按需引入了一部分ElementUI中的组件，比如（Button,Select,Input）

main.js

import Vue from 'vue'
import i18n from './util/locale/setLanguage'//我们实现国际化兼容的代码放在这个js文件中
import 'normalize.css/normalize.css'
import App from './App'
import router from './router'
import {
  Button,
  Select,
  Input,
} from 'element-ui';
.name, Dialog);
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
Vue.component(Input.name, Input);
new Vue({
  router,
  i18n,//挂载到实例
  render: h => h(App)
}).$mount('#app')

setLanguage.js

import Vue from 'vue'
//1、引入和使用vue-i18n插件
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

//2、引入自己定义的语言包
import enLocale from './lang/en'
import zhLocale from './lang/zh-CN'
import zhTWLocale from './lang/zh-TW'

//3、引入ElementUI相关的语言文件
import ElementLocale from 'element-ui/lib/locale'

//4、构造一个VueI18n实例
const i18n = new VueI18n({
  locale: localStorage.getItem('locale')  || 'zh_CN',
  messages: {
    zh_CN: zhLocale,
    en_US: enLocale,
    zh_TW: zhTWLocale,
  },
})

//5、重点就是这句话！！elementUI使用定制的i18n统一管理
ElementLocale.i18n((key, value) => i18n.t(key, value))

//6、在上面的main.js文件中把i18n挂载到了根实例上。
export default i18n

import ElementLocale from ‘element-ui/lib/locale’

这个index.js中的内容不贴了，自己去看吧。

en.js

//1、引入ElementUI组件的语言包
import enLocale from 'element-ui/lib/locale/lang/en'
//2、引入一个Javascript对象深层( 递归) 合并库
import deepmerge from 'deepmerge';
//3、项目中自定义语言包（此处只是举例）
var enM = {
  el: {
    font:{
      font1: 'Microsoft Yahei',
      font2: 'Times New Roman',
      font3: 'Bold',
      font4: 'Italics',
      font5: 'New Song Dynasty',
      font6: 'Song-like',
    },
    common: {
      quit: 'Quit',
      cancel: 'Cancel',
      confirm: 'Ok',
      close: 'Close',
      max: 'MaxiMize',
      mix: 'minimize',
      restore: 'Restore'
    }
  }
};
//4、项目中自定义语言包，与组件语言包合并
enM = deepmerge(enM, enLocale, { clone: true })
export default enM;

注意：

因为ElementUI的语言包最外层的对象名字是el，所以你自定义的语言文件对象名必须也是el，这样deepmerge才能把两个对象合并起来。合并之后名字是el，不会影响ElementUI组件里国际化的代码。

ElementUI的语言包en.js

ElementUI的语言包 和 自定义的语言包合并之后：

页面中的使用

• 在vue实例的 template 模板中：

{{ $t("el.common.confirm") }}

• 在vue实例的 JS 代码中：

this.$t("el.common.quit")

• 在vue实例外的 JS 代码中

import i18n from '@crm/locales'
i18n.t('el.common.Ok')

• 情况二

项目中引入了全部的ElementUI中的组件

setLanguage.js 文件中第五步改成如下：

import ElementUI from 'element-ui'
Vue.use(ElementUI,{
  i18n:(key,value) =>i18n.t(key,value) 
});

参考文章

https://element.eleme.cn/#/zh-CN/component/i18n

vue-i18n国际化插件实现语言切换

VUE+webpack+npm+elementUI项目中的多语言vue-i18n@8.x

vue中引入vue-i18n实现国际化时与ElementUI库的兼容性问题解决方法

如何让一个vue项目支持多语言（vue-i18n）