解决同时使用vue-i18n和ElementUI国际化时出现的冲突

出现的问题：
同时使用vue-i18n和ElementUI国际化时出现的冲突

就是elementui的部分内容显示的是底层封装好的源码。。。

解决的方法：

1、图上有个别注释就不详细说明了
2、解决冲突的主要思路就是：当我们同时使用vue-i18n和ElementUI国际化，就应该想到要合并到一块，这样在使用时候就不会冲突，这里我们使用...扩展运算符 将国际化文件合并在一块即可解决冲突。

具体存放i18n的js文件代码如下：

import Vue from 'vue';
import VueI18n from 'vue-i18n'
import en from 'iview/dist/locale/en-US'
import zh from 'iview/dist/locale/zh-CN'
//此处i18n为项目所使用的的vuei18n
import { i18n } from '../../dynamic-apps'
//此处elementui的i18n和vuei18n有冲突，解决冲突就是将两个国际化文件进行合并
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n);
// 先判断是否有设置语言，没有就用本地语言
if (localStorage.getItem('locale')) {
  Vue.config.lang = localStorage.getItem('locale');
} else {
  const lang = navigator.language;
  if (lang === 'zh-CN') {
    Vue.config.lang = 'zh-CN';
    localStorage.setItem('locale', 'zh-CN');
  } else {
    Vue.config.lang = 'en';
    localStorage.setItem('locale', 'en');
  }
}
// console.log('i18n',i18n);
Vue.locale = () => {};
// const messages = {
//   'en': Object.assign(en, i18n.en),
//   'zh-CN': Object.assign(zh, i18n['zh-CN'])
// }
const messages = {
  'en': {...en, ...i18n.en,...enLocale},
  'zh-CN': {...zh, ...i18n['zh-CN'],...zhLocale}
}


export default new VueI18n({
  locale: Vue.config.lang,
  messages
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40