国际化

说明

当前项目仅支持中文界面，AntDesign Vue 使用中文语言包（zh-cn），所有界面文本直接硬编码在组件中。如需扩展多语言支持，可基于 vue-i18n 实现。

当前状态

项目当前为中文单语言版本：

• AntDesign Vue 全局配置中文语言包：app.use(Antd, { locale: zhCn })
• 所有界面文本直接硬编码在组件中：<a-button>添加岗位</a-button>
• 后端返回的 msg 字段为中文："操作成功"、"岗位名称不能重复"

<template>
    <a-button type="primary">添加岗位</a-button>
    <a-table-column title="岗位名称" data-index="name" />
    <a-table-column title="创建时间" data-index="createTime" />
</template>

扩展方案

如需支持多语言，推荐使用 vue-i18n：

安装依赖

pnpm add vue-i18n

配置 i18n

// src/i18n/index.ts
import { createI18n } from 'vue-i18n';
import zhCN from './locales/zh-CN.json';
import enUS from './locales/en-US.json';

const i18n = createI18n({
    legacy: false,
    locale: localStorage.getItem('lang') || 'zh-CN',
    fallbackLocale: 'zh-CN',
    messages: { 'zh-CN': zhCN, 'en-US': enUS },
});

export default i18n;

语言文件

// src/i18n/locales/zh-CN.json
{
 "common": {
    "add": "新增", "edit": "编辑", "delete": "删除",
    "search": "搜索", "reset": "重置", "confirm": "确定", "cancel": "取消"
 },
 "position": { "name": "岗位名称", "status": "状态", "sort": "排序" }
}

组件中使用

<template>
    <a-button type="primary">{{ $t('common.add') }}</a-button>
    <a-table-column :title="$t('position.name')" data-index="name" />
</template>

<script setup>
import { useI18n } from 'vue-i18n';
    const { t } = useI18n();
</script>

AntDesign Vue 国际化

import zhCN from 'ant-design-vue/es/locale/zh_CN';
import enUS from 'ant-design-vue/es/locale/en_US';

app.use(Antd, { locale: zhCN });

温馨提示

国际化改造工作量较大，建议在项目初期规划。如仅需中文，当前硬编码方式即可满足需求。改造时需要同时处理前端文本和后端返回的 msg 字段。

总结

当前项目为中文单语言版本，AntDesign Vue 使用中文语言包。如需扩展多语言支持，可基于 vue-i18n 实现前端国际化，配合 AntDesign Vue 内置语言包和后端消息 code 实现全链路多语言。