国际化

:::tip 说明当前项目仅支持中文界面，NaiveUI 默认使用中文，所有界面文本直接硬编码在组件中。如需扩展多语言支持，可基于 vue-i18n 实现。 :::

当前状态

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

NaiveUI 默认中文，无需额外配置
所有界面文本直接硬编码在组件中：<n-button>新建</n-button>
后端返回的 msg 字段为中文："操作成功"、"岗位名称不能重复"

<template>
    <n-button type="primary">新建</n-button>
    <!-- 表格列定义在 columns.ts 中 -->
</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>
    <n-button type="primary">{{ $t('common.add') }}</n-button>
</template>

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

NaiveUI 国际化

NaiveUI 通过 n-config-provider 的 locale 属性支持国际化：

<template>
    <n-config-provider :locale="zhCN">
        <App />
    </n-config-provider>
</template>

<script setup>
import { zhCN, dateZhCN } from 'naive-ui';
</script>

语言切换组件

<!-- src/components/LangSelect/index.vue -->
<template>
  <n-dropdown :options="langOptions" @select="handleLangChange">
    <n-button text>🌐</n-button>
  </n-dropdown>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { useAppStore } from '/@/store/modules/app';

const { locale } = useI18n();
const appStore = useAppStore();

const langOptions = [
    { label: '中文', key: 'zh-CN', disabled: locale.value === 'zh-CN' },
    { label: 'English', key: 'en-US', disabled: locale.value === 'en-US' },
];

const handleLangChange = (lang: string) => {
  locale.value = lang;
  localStorage.setItem('lang', lang);
  appStore.setLocale(lang);
  // 刷新页面以更新 NaiveUI 语言包
  window.location.reload();
};
</script>

后端消息国际化

后端返回的 msg 字段可通过 code 映射实现多语言：

// 前端根据 code 映射多语言消息
const msgMap: Record<number, string> = {
  0: t('common.success'),
  1: t('common.failed'),
  401: t('common.unauthorized'),
  403: t('common.forbidden'),
};

// Axios 响应拦截器中
if (response.data.code !== 0) {
  const msg = msgMap[response.data.code] || response.data.msg;
  window.$message.error(msg);
}

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

总结

当前项目为中文单语言版本，NaiveUI 默认使用中文。如需扩展多语言支持，可基于 vue-i18n 实现前端国际化，配合 NaiveUI 的 n-config-provider 内置语言包和后端消息 code 实现全链路多语言。语言切换组件可放在顶栏，支持用户手动切换。

3.6 KiB Raw Blame History

国际化