当前位置：首页 > news >正文

【前端】【vue-i8n】【element】Element 框架国际化配置指南：从 element-ui 到 element-plus

news 来源：原创 2025/6/6 15:07:32

Element 框架国际化配置指南：从 element-ui 到 element-plus

在全球化的大背景下，构建支持多语言的应用程序变得愈发重要。Element 作为一款广泛使用的前端 UI 框架，为开发者提供了便捷的国际化（i18n）解决方案。本文将详细介绍在 element-ui 和 element-plus 中如何进行按需加载里的 i18n 定制。

一、element-ui 的 i18n 定制

（一）官方文档指引

element-ui 的官方文档为我们提供了详细的 i18n 定制说明，相关链接为：https://element.eleme.cn/#/zh-CN/component/i18n#an-xu-jia-zai-li-ding-zhi-i18n。通过该文档，我们能够清晰地了解到按需加载里定制 i18n 的具体步骤和方法。

（二）具体实现代码解析

以下是实现 element-ui 按需加载里定制 i18n 的代码示例：

import Vue from 'vue'
import DatePicker from 'element/lib/date-picker'
import VueI18n from 'vue-i18n'

import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import ElementLocale from 'element-ui/lib/locale'

Vue.use(VueI18n)
Vue.use(DatePicker)

const messages = {
    en: {
        message: 'hello',
      ...enLocale
    },
    zh: {
        message: '你好',
      ...zhLocale
    }
}
// Create VueI18n instance with options
const i18n = new VueI18n({
    locale: 'en', // set locale
    messages, // set locale messages
})

ElementLocale.i18n((key, value) => i18n.t(key, value))

引入必要的模块：
- 首先，导入 Vue 实例，因为我们要基于 Vue 进行相关操作。
- 接着引入 DatePicker，这里以日期选择器为例展示按需加载组件。
- 导入 VueI18n 用于实现 Vue 的国际化功能。
- 从 element-ui/lib/locale/lang 目录下分别引入英文和中文的语言包 enLocale 和 zhLocale，以及 ElementLocale 用于配置 element-ui 的语言。
使用 VueI18n 和注册组件：
- 通过 Vue.use(VueI18n) 启用 VueI18n 插件。
- 使用 Vue.use(DatePicker) 注册 DatePicker 组件，实现按需加载。
定义多语言消息：
- 创建 messages 对象，在其中分别定义英文（en）和中文（zh）的语言信息。不仅可以自定义一些文本，如 message，还通过展开运算符（...）将 element-ui 对应的语言包合并进来，确保框架自身的组件也能正确显示对应语言。
创建 VueI18n 实例：
- 使用 new VueI18n 创建国际化实例，并设置默认语言为 en，同时传入之前定义好的 messages 作为语言消息源。
配置 element-ui 的国际化：
- 通过 ElementLocale.i18n 方法，将 VueI18n 的 t 函数传入，这样 element-ui 就能根据当前设置的语言从 messages 中获取对应的文本进行显示。

二、element-plus 的 i18n 定制

（一）官方文档参考

element-plus 的官方文档提供了全面的国际化指南，链接为：国际化 | Element Plus (element-plus.org)。该文档详细介绍了多种实现国际化的方式，满足不同场景的需求。

（二）方案一：使用 ConfigProvider 组件

Element Plus 提供了 ConfigProvider 组件用于全局配置国际化设置。以下是具体代码示例：

<template>
    <el-config-provider :locale="zhCn">
        <app />
    </el-config-provider>
</template>
<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
</script>

引入组件和语言包：
- 从 element-plus 中导入 ElConfigProvider 组件。
- 从 element-plus/es/locale/lang 目录下引入中文语言包 zhCn。
使用 ConfigProvider 组件：
- 在模板中，将 el-config-provider 组件包裹应用的根组件（这里是 <app />），并通过 :locale 属性绑定引入的中文语言包 zhCn，这样就实现了整个应用基于中文语言的国际化配置。

（三）方案二：全局配置

Element Plus 也支持通过全局配置的方式实现国际化。代码示例如下：

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus, {
    locale: zhCn,
})

引入框架和语言包：
- 导入 ElementPlus 框架和中文语言包 zhCn。
全局配置国际化：
- 使用 app.use 方法安装 ElementPlus，并在第二个参数中传入配置对象 { locale: zhCn }，将中文语言包设置为应用的默认语言，从而实现全局的国际化配置。