Skip to content

国际化 ​

统一使用 @axewo/fin-locale 创建语言实例、合并词条并切换语言。内置简体中文 zh-CN 与英文 en,业务项目只维护 src/locales 映射。

安装并注入 ​

ts
import { installFinI18n } from '@axewo/fin-locale'
import messages from './locales'
installFinI18n(app, { locale: 'zh-CN', messages })

在 app.use(FinUI) 前完成注入;同一个 App 重复安装会复用已有实例,不覆盖应用已经安装的 vue-i18n。每个应用单独创建实例。

ts
// src/locales/index.ts
import zhCN from './zh-CN'
import en from './en'
export default { 'zh-CN': zhCN, en }

// src/locales/zh-CN.ts
// export default { order: { submit: '提交订单' } }

组件中使用 ​

vue
<script setup lang="ts">
import { FinLocaleProvider } from '@axewo/fin-ui'
import { useFinLocale } from '@axewo/fin-locale'
const { t, locale, setLocale } = useFinLocale()
</script>
<template>
  <FinLocaleProvider size="default">
    <button @click="setLocale(locale === 'en' ? 'zh-CN' : 'en')">
      {{ t('order.submit') }}
    </button>
  </FinLocaleProvider>
</template>

FinLocaleProvider 同步 Fin UI 与 Element Plus 的语言和尺寸。应用无需自行维护 Element Plus 语言映射,也不需要复制 utils/i18n.ts 或 utils/locale.ts。

公共词条与扩展 ​

fin.* 为公共命名空间,业务使用 order.* 等独立命名空间。传入的消息按语言递归合并,局部扩展不会覆盖其他公共键。

setLocale('ja-JP') 等扩展语言会保留原语种;在 messages['ja-JP'] 提供业务翻译,缺失词条默认回退中文。normalizeAppLocale 用于应用语言标识,normalizeFinLocale 仅用于内置中英文识别。微前端模板的语言下拉读取 FConfigProvider 的 config.langs,未配置时默认中英文,详见接入说明。

ts
import { zhCN, en, normalizeFinLocale, translateFinBuiltin } from '@axewo/fin-locale'
normalizeFinLocale('en_US') // 'en'
translateFinBuiltin('fin.auth.login', 'en') // 'Sign in'

也支持 @axewo/fin-locale/locales/zh-CN 与 /locales/en 默认导入。旧的 /lang/zh-CN、/lang/en 仅保留兼容别名,源码统一归入 locales。

完整业务插值使用当前实例的 t,translateFinBuiltin 用于 Vue 启动前的公共文案。微前端的独立认证、宿主语言同步和权限接入见接入说明。