解决同时使用vue-i18n和ElementUI国际化时出现的冲突_vue less-loader vue-i18n安装冲突-优快云博客

本文介绍了解决Vue项目中使用vue-i18n和ElementUI时出现的国际化冲突问题。通过合并两个国际化的配置文件，可以避免ElementUI部分组件显示源码的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出现的问题：
同时使用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
});