前端国际化配置
框架内置中文简体和英文两种语言，支持前端和后端双重配置方式，满足不同场景的国际化需求。
自 V5.12.1 起，登录页 国际化切换 开关建议在网站配置的图形化界面中维护；本文主要说明国际化内容本身的配置方式和代码用法。
多国语言配置
前端配置国际化
页面国际化数据建议放在同级目录的 i18n 文件夹中。/@/i18n 目录为框架内置，为了便于后续升级，请勿直接在此目录中添加自定义配置。
⚠目录规范
自定义国际化文件应放在页面同级目录的 i18n 文件夹中，不要修改框架内置的 /@/i18n 目录。
后端配置国际化
后端国际化配置与前端 i18n 配置的 TypeScript 文件格式相同，可以通过后台的国际化管理模块进行配置和使用。
💡配置方式
支持通过后台管理界面动态配置国际化内容，无需修改代码即可更新翻译文本。
国际化使用
在 Vue 模板中使用
在 .vue 文件的模板中，使用 $t('xxx.xxx') 语法：
<el-button>
<span>{{ $t('message.account.accountBtnText') }}</span>
</el-button>
<el-divider content-position="left">
{{ $t('message.layout.oneTitle') }}
</el-divider>
在 TypeScript 中使用
在 .ts 文件中，使用 i18n.global.t(xxx) 语法：
import { i18n } from '/@/i18n/index';
const webTitle = i18n.global.t(router.currentRoute.value.meta.title as any);
在 setup 中使用
在组件的 setup 函数中，使用 t(xxx) 语法：
<script lang="ts">
import { defineComponent } from 'vue';
import { useI18n } from 'vue-i18n';
export default defineComponent({
name: 'xxx',
setup() {
const { t } = useI18n();
// 使用，xxx 为变量
return {
title: t(xxx)
};
}
})
</script>
💡使用场景
根据不同的使用场景选择合适的方式：模板中使用 $t()，TypeScript 中使用 i18n.global.t()，setup 中使用 useI18n() 获取 t 函数。
框架其他国际化
菜单国际化
菜单国际化配置位于 /@/layout/navMenu，读取 /@/router/route.ts 中的 meta.title 字段。格式为 message.router.xxx，需要提前在后台的国际化管理模块中维护中文菜单和英文菜单的对应关系。
⚠配置要求
菜单的国际化键值必须在后台国际化管理模块中预先配置，否则会显示为键名。
浏览器标题国际化
浏览器标题国际化通过 /@/utils/other.ts 中的 useTitle 方法实现，使用时调用 other.useTitle()。
/**
* 设置浏览器标题国际化
* @method const title = useTitle(); => title()
*/
export function useTitle() {
const stores = useThemeConfig(pinia);
const { themeConfig } = storeToRefs(stores);
nextTick(() => {
let webTitle = '';
let globalTitle: string = themeConfig.value.globalTitle;
const { path, meta } = router.currentRoute.value;
if (path === '/login') {
webTitle = <string>meta.title;
} else {
webTitle = setTagsViewNameI18n(router.currentRoute.value);
}
document.title = `${webTitle} - ${globalTitle}` || globalTitle;
});
}
顶栏国际化
顶栏组件位于 /@/layout/navBars/breadcrumb，包含面包屑、组件大小、语言切换、菜单搜索、布局配置、消息、全屏切换、用户下拉菜单等功能。基本都使用 $t(xxx.xxx.xxx) 语法。
<div>{{ $t(v.meta.title) }}</div>
布局配置国际化
布局配置组件位于 /@/layout/navBars/breadcrumb/setings.vue，国际化数据在 /@/i18n/lang 中的 layout 对象。基本使用 $t('message.layout.xxx') 语法。
<div class="layout-breadcrumb-seting-bar-flex-label">
{{ $t('message.layout.twoMenuBar') }}
</div>
页面国际化
页面中基本使用 $t('message.xxx.xxx') 语法进行国际化。
✓最佳实践
建议将页面相关的国际化配置统一放在页面同级目录的 i18n 文件夹中，便于维护和管理。