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. 在这里插入图片描述
    在这里插入图片描述

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐