国际化

XYGo Admin 2025-02-20 98 次阅读

vue-i18n 多语言配置与使用指南

国际化

XYGo Admin 基于 vue-i18n 实现多语言支持，目前内置简体中文和英文。

语言文件

语言包位于 web/src/locales/ 目录：

复制代码

locales/
├── index.ts          # i18n 实例创建与配置
└── langs/
    ├── zh.json       # 简体中文
    └── en.json       # English

配置说明

typescript 复制代码

// locales/index.ts
import { createI18n } from 'vue-i18n'
import zh from './langs/zh.json'
import en from './langs/en.json'

const i18n = createI18n({
  locale: 'zh',           // 默认语言
  fallbackLocale: 'en',   // 回退语言
  messages: { zh, en }
})

语言偏好会自动保存到 localStorage，下次访问时恢复。

使用方式

模板中使用

vue 复制代码

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

脚本中使用

typescript 复制代码

import { useI18n } from 'vue-i18n'

const { t } = useI18n()
console.log(t('common.success'))

语言包格式

json 复制代码

{
  "common": {
    "success": "操作成功",
    "failed": "操作失败",
    "confirm": "确定",
    "cancel": "取消",
    "welcome": "欢迎，{name}"
  },
  "dashboard": {
    "title": "控制台"
  }
}

切换语言

前台布局中提供了语言切换按钮，点击即可切换。切换后会：

更新 i18n locale
保存到 localStorage
更新 Element Plus 的语言包

添加新语言

在 locales/langs/ 下新建语言文件，如 ja.json
在 locales/index.ts 中导入并注册
在语言切换组件中添加选项