Vue3 - Element Plus 组件全是英文的 “全局汉化“ 解决方案，各种组件都显示 No Data / Go to 等英文文字，将其全部组件从英文变成汉语的详细教程（并解决了引入报错问题）

一、背景与问题

在使用 Element Plus 构建 Vue3 项目时，常会遇到组件默认显示英文的问题。例如：

• 表格组件的 No Data 提示
• 按钮的 Go to 翻页提示
• 弹窗的 Confirm 按钮文本
• 输入框的 Required 提示

这些英文提示在国际化项目中需要统一翻译，但直接修改组件源码或手动替换所有组件的文本显然不现实。本文将深入解析 Element Plus 的国际化机制，提供一个全局汉化解决方案，并解决引入报错的常见问题。

二、基本原理

Element Plus 的国际化支持基于 Vue I18n 库，其核心原理是通过以下机制实现：

1. 全局翻译文本：通过 i18n 实例配置多语言资源文件
2. 动态翻译：使用 $t 方法动态获取对应语言的文本
3. 组件内翻译：Element Plus 的组件内部已内置对 i18n 的支持，但默认只提供英文资源

问题根源

Element Plus 的组件内部使用了硬编码的英文字符串（如 No Data），未通过 i18n 实例动态获取翻译文本。因此即使全局配置了中文资源，部分组件仍会显示英文。

三、环境准备

1. 项目依赖

确保已安装以下依赖：

npm install vue-i18n@9

2. 项目结构

建议采用如下目录结构：

src/
├── i18n/           # 国际化资源文件
│   ├── zh-cn.js    # 中文资源文件
│   └── en-us.js    # 英文资源文件
├── lang/           # 语言配置文件
│   └── index.js    # i18n 配置
├── App.vue
└── main.js

四、核心实现

1. 创建国际化资源文件

src/i18n/zh-cn.js（中文资源文件）

// zh-cn.js
export default {
  'el' : {
    'noData': '无数据',
    'confirm': '确认',
    'cancel': '取消',
    'required': '必填项',
    'goTo': '前往',
    'table': {
      'emptyText': '暂无数据'
    }
  }
}

src/i18n/en-us.js（英文资源文件）

// en-us.js
export default {
  'el': {
    'noData': 'No Data',
    'confirm': 'Confirm',
    'cancel': 'Cancel',
    'required': 'Required',
    'goTo': 'Go to',
    'table': {
      'emptyText': 'Empty'
    }
  }
}

2. 配置 i18n 实例

src/lang/index.js（i18n 配置）

// lang/index.js
import { createI18n } from 'vue-i18n'

// 加载语言包
import en from './en-us'
import zh from './zh-cn'

export default createI18n({
  legacy: false, // 使用 Composition API 时必须设置为 false
  locale: 'zh-cn', // 默认语言
  fallbackLocale: 'zh-cn', // 备用语言
  messages: {
    'zh-cn': zh,
    'en-us': en
  }
})

3. 集成 i18n 到 Vue 应用

main.js

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './lang'

const app = createApp(App)
app.use(i18n)
app.mount('#app')

五、完整案例

1. 示例页面：数据展示组件

src/App.vue

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
    <el-button @click="handleClick">{{ $t('el.goTo') }}</el-button>
    <el-dialog v-model="dialogVisible" title="提示">
      <p>{{ $t('el.required') }}</p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false
    }
  },
  methods: {
    handleClick() {
      this.dialogVisible = true
    }
  }
}
</script>

2. 运行效果

• 表格显示 "无数据"（来自 zh-cn.js 的 table.emptyText）
• 按钮显示 "前往"（来自 zh-cn.js 的 goTo）
• 弹窗提示显示 "必填项"（来自 zh-cn.js 的 required）

六、源码解析

1. i18n 实例初始化原理

createI18n 创建的实例会注入以下全局属性：

• $i18n：i18n 实例
• $t：动态翻译方法
• $d：格式化数字方法
• $tc：复数翻译方法
• $n：数字格式化方法

2. 组件内部翻译机制

Element Plus 的组件内部会调用 this.$t() 方法获取翻译文本。例如：

// Element Plus 内部某处代码
this.$t('el.noData') // 会从 i18n 实例中获取对应的中文文本

3. 动态翻译的底层实现

$t 方法通过以下流程获取翻译文本：

1. 检查当前语言（locale）
2. 查找对应的 messages 对象
3. 返回对应的文本或默认值

七、进阶使用

1. 动态切换语言

语言切换按钮组件

<template>
  <el-button @click="toggleLang">
    {{ currentLang === 'zh-cn' ? '切换为英文' : '切换为中文' }}
  </el-button>
</template>

<script>
export default {
  data() {
    return {
      currentLang: 'zh-cn'
    }
  },
  methods: {
    toggleLang() {
      this.currentLang = this.currentLang === 'zh-cn' ? 'en-us' : 'zh-cn'
      this.$i18n.global.locale = this.currentLang
    }
  }
}
</script>

2. 嵌套组件的翻译

<template>
  <el-card>
    <p>{{ $t('el.noData') }}</p>
    <el-button @click="handleClick">{{ $t('el.goTo') }}</el-button>
  </el-card>
</template>

3. 自定义组件翻译

<template>
  <el-input v-model="input" :placeholder="$t('el.required')"></el-input>
</template>

八、性能与工程实践

1. 性能优化建议

• 按需加载语言包：对于大型项目，可按路由动态加载语言资源
• 缓存翻译文本：避免重复查找 messages 对象
• 使用 @vue/i18n 的优化特性：如 useI18n 的懒加载支持

2. 异常处理机制

// 翻译文本未找到时的处理
this.$t('el.unknownKey', { default: '未知键' })

3. 安全注意事项

• 避免 XSS 攻击：确保翻译文本不会包含用户输入内容
• 禁用动态渲染：对用户提供的翻译文本进行转义处理

九、常见问题与踩坑

1. 常见错误及解决方法

2. 常见陷阱

• 误用 legacy: true：使用 Vue3 的 Composition API 时，必须设置为 false
• 未导入语言包：忘记导入 zh-cn.js 或 en-us.js
• 未处理动态内容：如 {{ $t('el.noData', { count: 5 }) }} 需要支持插值

十、最佳实践

1. 推荐的使用场景

• 多语言支持项目：需要支持中英文切换的国际化项目
• 统一 UI 语言：需要统一所有组件的提示语和按钮文本
• 复杂业务场景：如电商平台、管理系统等需要严格的 UI 一致性

2. 不推荐的使用场景

• 简单展示项目：仅需显示中文的单页应用
• 动态内容较少：不需要频繁切换语言的项目
• 第三方组件依赖：部分组件可能未支持 i18n 翻译

十一、总结

通过本文的深入解析，我们了解到：

1. Element Plus 的组件默认显示英文是由于其内部使用硬编码字符串
2. 使用 vue-i18n 可实现全局翻译，但需要正确配置语言包和 i18n 实例
3. 翻译文本需要通过 $t 方法获取，且支持动态参数插值
4. 项目中需要处理语言切换、异常处理和安全问题
5. 需要根据项目需求决定是否采用该方案

在实际开发中，建议优先采用 vue-i18n 的标准方案，它能够提供更稳定的翻译机制和更好的可维护性。对于仅需中文的项目，也可以通过覆盖组件样式和文本实现简单汉化，但不推荐长期使用。