Element Plus 国际化配置

Element Plus 中文配置指南

转载于 2025-12-07 10:00:02 发布

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/leirui/p/19317545

文章标签：

#it

📘 Element Plus 国际化配置指南

让您的 Element Plus 组件支持中文显示

适用于 Vue 3 + Element Plus 项目的国际化配置解决方案

问题描述

在使用 Element Plus 组件库时，默认情况下组件的语言是英文。例如，分页组件（Pagination）的"前往"、"页"等文字会显示为英文。

解决方案

要将 Element Plus 组件的语言设置为中文，需要在项目入口文件中进行全局配置。

步骤 1: 导入中文语言包

在 main.js 文件中导入 Element Plus 的中文语言包：

/* by 01130.hk - online tools website : 01130.hk/zh/dnsusa.html */
import zhCn from 'element-plus/es/locale/lang/zh-cn'

步骤 2: 在初始化 Element Plus 时配置语言

在使用 app.use() 初始化 Element Plus 时，传入 locale 配置项就可以了。：

/* by 01130.hk - online tools website : 01130.hk/zh/dnsusa.html */
app.use(ElementPlus, { 
  locale: zhCn 
})

完整示例

以下是一个完整的 main.js 配置示例：

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
// 引入中文语言包
import zhCn from "element-plus/es/locale/lang/zh-cn";

const app = createApp(App);

// 配置 Element Plus 使用中文语言包
app.use(ElementPlus, { locale: zhCn });

app.mount("#app");