vue2 实现 Element UI 组件库国际化

Element本身具有国际化功能；但问题是Element的官方文档中提到：

Element 兼容 vue-i18n@5.x，搭配使用能更方便地实现多语言切换。
默认不支持 6.x 的 vue-i18n，你需要手动处理。

---

一、前置条件

在开始之前，请确保您的项目满足以下条件：

1. 使用了 Vue 2.x 版本。
2. 已安装 vue-i18n 插件（本文基于 ^8.28.2）。
3. 使用了 Element UI 组件库。

---

二、整合 Element UI 的国际化

Element UI 提供了内置的国际化支持，我们需要引入 Element UI 的语言包并与自定义语言包合并。

import Vue from 'vue';
import VueI18n from 'vue-i18n'; // 引入 vue-i18n
import store from "../store"; // 获取全局状态管理的语言设置
import zhLocale from "element-ui/lib/locale/lang/zh-CN"; // Element UI 中文语言包
import enLocale from "element-ui/lib/locale/lang/en";   // Element UI 英文语言包
import zh from "./zh";  // 自定义中文语言包
import en from "./en";  // 自定义英文语言包

// 使用 VueI18n 插件
Vue.use(VueI18n);

const messages = {
  zh: {
    ...zh,
    ...zhLocale
  },
  en: {
    ...en,
    ...enLocale
  }
};

const i18n = new VueI18n({
  locale: store.getters['language'] || "zh", // 默认语言从 Vuex 中获取
  messages // 设置语言包
});

// 配置 Element UI 的 i18n
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value), // 绑定 i18n 的翻译方法
});

export default i18n;

重点：
确保在项目中正确引入 element-ui，例如：

import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value),
});

三、最终效果

当用户切换语言时：

1. Element UI 的内置组件会根据选择的语言自动切换。
2. 
   

---