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

【Element进阶】1、深入理解Element UI的国际化

ops 2025/7/5 22:47:45

【Element进阶】深入理解Element UI的国际化

系列文章导航：

【Element进阶】1、深入理解Element UI的国际化（本文）
【Element进阶】2、Element UI与Vue Router结合
【Element进阶】3、Element UI与Vuex结合
【Element进阶】4、Element UI 复杂表单处理
【Element进阶】5、自定义组件与Element UI集成
【Element进阶】6、Element UI 高阶数据展示
【Element进阶】7、Element UI 性能优化
【Element进阶】8、Element UI 最佳实践与案例分析

随着全球化的推进，支持多语言的国际化功能在现代 Web 应用中变得越来越重要。Element UI 提供了方便的国际化配置，使得开发者可以轻松地为应用添加多语言支持。本篇文章将深入探讨 Element UI 的国际化配置，并通过实际应用案例展示如何在项目中实现国际化。

Element UI的国际化配置

基本概念

Element UI 的国际化（i18n）支持通过配置语言包来实现。默认情况下，Element UI 使用中文语言包。我们可以通过引入不同的语言包，并结合 Vue i18n 插件，来实现多语言切换。

安装 Vue i18n

首先，我们需要安装 Vue i18n 插件：

npm install vue-i18n --save

配置语言包

在项目中创建一个 i18n 目录，并在其中创建语言包文件。例如，我们创建 en.js 和 zh-CN.js 文件，用于存放英文和中文的翻译内容：

// src/i18n/en.js
export default {el: {colorpicker: {confirm: 'OK',clear: 'Clear'},datepicker: {now: 'Now',today: 'Today',cancel: 'Cancel',clear: 'Clear',confirm: 'OK',selectDate: 'Select date',selectTime: 'Select time',startDate: 'Start date',startTime: 'Start time',endDate: 'End date',endTime: 'End time',prevYear: 'Previous year',nextYear: 'Next year',prevMonth: 'Previous month',nextMonth: 'Next month',year: '',month1: 'January',month2: 'February',month3: 'March',month4: 'April',month5: 'May',month6: 'June',month7: 'July',month8: 'August',month9: 'September',month10: 'October',month11: 'November',month12: 'December',week: 'week',weeks: {sun: 'Sun',mon: 'Mon',tue: 'Tue',wed: 'Wed',thu: 'Thu',fri: 'Fri',sat: 'Sat'},months: {jan: 'Jan',feb: 'Feb',mar: 'Mar',apr: 'Apr',may: 'May',jun: 'Jun',jul: 'Jul',aug: 'Aug',sep: 'Sep',oct: 'Oct',nov: 'Nov',dec: 'Dec'}},// 其余内容省略...}
};

// src/i18n/zh-CN.js
export default {el: {colorpicker: {confirm: '确定',clear: '清空'},datepicker: {now: '此刻',today: '今天',cancel: '取消',clear: '清空',confirm: '确定',selectDate: '选择日期',selectTime: '选择时间',startDate: '开始日期',startTime: '开始时间',endDate: '结束日期',endTime: '结束时间',prevYear: '前一年',nextYear: '后一年',prevMonth: '上个月',nextMonth: '下个月',year: '年',month1: '1 月',month2: '2 月',month3: '3 月',month4: '4 月',month5: '5 月',month6: '6 月',month7: '7 月',month8: '8 月',month9: '9 月',month10: '10 月',month11: '11 月',month12: '12 月',week: '周次',weeks: {sun: '日',mon: '一',tue: '二',wed: '三',thu: '四',fri: '五',sat: '六'},months: {jan: '一月',feb: '二月',mar: '三月',apr: '四月',may: '五月',jun: '六月',jul: '七月',aug: '八月',sep: '九月',oct: '十月',nov: '十一月',```jsdec: '十二月'}},// 其余内容省略...}
};

配置 Vue i18n

在项目的入口文件（如 main.js）中配置 Vue i18n，并将语言包引入：

// main.js
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueI18n from 'vue-i18n';
import locale from 'element-ui/lib/locale';
import enLocale from './i18n/en';
import zhCNLocale from './i18n/zh-CN';Vue.use(VueI18n);const messages = {en: enLocale,'zh-CN': zhCNLocale
};const i18n = new VueI18n({locale: 'zh-CN', // 设置默认语言messages
});locale.i18n((key, value) => i18n.t(key, value)); // 兼容 Element UI 的语言包Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) });new Vue({i18n,render: h => h(App)
}).$mount('#app');

在这个配置中，我们创建了一个 VueI18n 实例，并设置了默认语言为中文。同时，我们引入了 Element UI 的国际化配置，使其语言包能够与 Vue i18n 兼容。

动态切换语言

我们可以通过修改 i18n.locale 来动态切换语言。例如，在应用中添加一个语言切换按钮：

<template><div id="app"><el-button @click="switchLanguage('en')">English</el-button><el-button @click="switchLanguage('zh-CN')">中文</el-button><el-input placeholder="Please input" /></div>
</template><script>
export default {name: 'App',methods: {switchLanguage(lang) {this.$i18n.locale = lang;}}
};
</script>

在这个示例中，我们通过点击按钮切换语言，并在输入框中展示语言切换的效果。

国际化实际应用案例

案例介绍

在实际项目中，国际化功能不仅涉及到组件的语言包，还包括页面文本、提示消息等内容的多语言支持。下面我们通过一个简单的表单示例，展示如何实现页面文本的国际化。

创建国际化语言包

在 i18n 目录下创建 messages.js 文件，用于存放页面文本的翻译内容：

// src/i18n/messages.js
export default {en: {welcome: 'Welcome',name: 'Name',email: 'Email',submit: 'Submit',success: 'Form submitted successfully!'},'zh-CN': {welcome: '欢迎',name: '姓名',email: '电子邮件',submit: '提交',success: '表单提交成功！'}
};

修改 Vue i18n 配置

在 main.js 中引入新的翻译内容：

import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueI18n from 'vue-i18n';
import locale from 'element-ui/lib/locale';
import enLocale from './i18n/en';
import zhCNLocale from './i18n/zh-CN';
import messages from './i18n/messages';Vue.use(VueI18n);const i18nMessages = {en: { ...enLocale, ...messages.en },'zh-CN': { ...zhCNLocale, ...messages['zh-CN'] }
};const i18n = new VueI18n({locale: 'zh-CN', // 设置默认语言messages: i18nMessages
});locale.i18n((key, value) => i18n.t(key, value)); // 兼容 Element UI 的语言包Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) });new Vue({i18n,render: h => h(App)
}).$mount('#app');

创建国际化表单组件

创建一个简单的表单组件 Form.vue，并使用国际化文本：

<template><div><h1>{{ $t('welcome') }}</h1><el-form ref="form" :model="form" :rules="rules" @submit.native.prevent="handleSubmit"><el-form-item :label="$t('name')" prop="name"><el-input v-model="form.name"></el-input></el-form-item><el-form-item :label="$t('email')" prop="email"><el-input v-model="form.email"></el-input></el-form-item><el-form-item><el-button type="primary" @click="handleSubmit">{{ $t('submit') }}</el-button></el-form-item></el-form></div>
</template><script>
export default {name: 'Form',data() {return {form: {name: '',email: ''},rules: {name: [{ required: true, message: this.$t('name') + ' is required', trigger: 'blur' }],email: [{ required: true, message: this.$t('email') + ' is required', trigger: 'blur' },{ type: 'email', message: 'Please enter a valid email address', trigger: ['blur', 'change'] }]}};},methods: {handleSubmit() {this.$refs.form.validate((valid) => {if (valid) {this.$message.success(this.$t('success'));} else {console.log('error submit!!');return false;}});}}
};
</script>

在这个示例中，我们使用了 $t 方法来获取国际化文本，并在表单中展示了国际化的标签和按钮文本。同时，我们也在表单验证规则中使用了国际化文本。

应用组件并实现语言切换

在 App.vue 中使用 Form.vue 组件，并添加语言切换功能：

<template><div id="app"><el-button @click="switchLanguage('en')">English</el-button><el-button @click="switchLanguage('zh-CN')">中文</el-button><Form /></div>
</template><script>
import Form from './components/Form.vue';export default {name: 'App',components: {Form},methods: {switchLanguage(lang) {this.$i18n.locale = lang;}}
};
</script>

在这个示例中，我们在 App.vue 中引入了 Form.vue 组件，并添加了两个按钮用于切换语言。当用户点击按钮时，调用 switchLanguage 方法来切换语言。