国际化

vue3-element-admin 基于 vue-i18n 提供中文、英文等多语言能力，并同步 Element Plus 组件语言。新增菜单或业务页面时，优先确认路由标题、菜单名称和页面文案是否都进入语言包。

先看什么？

你要做什么	推荐章节
找语言包位置	项目结构
在页面中使用翻译	使用方式
新增语言文案	语言包示例
切换当前语言	切换语言
同步组件库语言	Element Plus 国际化

介绍

国际化能力覆盖语言包、运行时切换、组件库语言同步和菜单/路由文案维护：

• 中文 / 英文 - 默认提供中文和英文语言包，新增语言时按同一结构扩展
• 运行时切换 - 切换语言后无需刷新页面
• 按需加载 - 语言包支持懒加载，减少首屏资源
• Element Plus 集成 - 同步 Element Plus 组件语言
• 菜单与路由文案 - 菜单标题、路由标题和业务消息统一进入语言包

项目结构

在 src/lang 目录管理语言包：

lang/
├── index.ts       # 国际化配置入口
├── zh-cn.ts       # 中文语言包
├── en.ts          # 英文语言包
└── package/       # 按模块拆分（可选）
    ├── common.ts
    ├── route.ts
    └── components.ts

使用方式

在模板中使用

<template>
  <div>
    <h1>{{ $t('common.title') }}</h1>
    <p>{{ $t('common.welcome', { name: 'Admin' }) }}</p>
  </div>
</template>

在脚本中使用

import { useI18n } from 'vue-i18n'

const { t } = useI18n()

console.log(t('common.title'))

语言包示例

// lang/zh-cn.ts
export default {
  common: {
    title: '后台管理系统',
    welcome: '欢迎 {name}',
    confirm: '确定',
    cancel: '取消'
  },
  menu: {
    dashboard: '首页',
    system: '系统管理',
    user: '用户管理'
  }
}

// lang/en.ts
export default {
  common: {
    title: 'Admin System',
    welcome: 'Welcome {name}',
    confirm: 'Confirm',
    cancel: 'Cancel'
  },
  menu: {
    dashboard: 'Dashboard',
    system: 'System',
    user: 'User'
  }
}

切换语言

import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

// 切换为英文
locale.value = 'en'

// 切换为中文
locale.value = 'zh-cn'

Element Plus 国际化

项目已配置 Element Plus 国际化：

import { createI18n } from 'vue-i18n'
import ElementPlusZhCn from 'element-plus/dist/locale/zh-cn.mjs'
import ElementPlusEn from 'element-plus/dist/locale/en.mjs'

const i18n = createI18n({
  locale: 'zh-cn',
  messages: {
    'zh-cn': { ...zhCn, ...ElementPlusZhCn },
    'en': { ...en, ...ElementPlusEn }
  }
})

相关链接

• LangSelect 组件
• vue-i18n