如何在Angular v11项目中按模块/页面拆分实现国际化

针对大文本量项目拆分翻译文件的需求，主流i18n库（如Vue I18n、React i18next）都支持按模块/命名空间拆分，下面是具体实现方案和示例：

一、通用文件结构组织 #

先按语言+模块划分目录，确保结构清晰：

src/
  locales/
    en/
      common.json   # 通用文本：按钮、提示语等
      user.json     # 用户模块文本：登录、注册等
      order.json    # 订单模块文本：下单、支付等
    zh-CN/
      common.json
      user.json
      order.json

二、Vue I18n 实现示例 #

1. 导入并合并模块翻译文件

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
// 导入各模块翻译
import enCommon from './locales/en/common.json'
import enUser from './locales/en/user.json'
import enOrder from './locales/en/order.json'
import zhCommon from './locales/zh-CN/common.json'
import zhUser from './locales/zh-CN/user.json'
import zhOrder from './locales/zh-CN/order.json'

const messages = {
  en: {
    ...enCommon, // 通用文本平铺到根节点
    user: enUser, // 用户模块作为嵌套对象
    order: enOrder // 订单模块作为嵌套对象
  },
  'zh-CN': {
    ...zhCommon,
    user: zhUser,
    order: zhOrder
  }
}

const i18n = createI18n({
  locale: 'zh-CN',
  messages
})

const app = createApp(App)
app.use(i18n)
app.mount('#app')

2. 组件内使用

<!-- 用户登录组件 -->
<template>
  <div>
    <h1>{{ $t('user.login.title') }}</h1>
    <button>{{ $t('confirm') }}</button> <!-- 通用文本直接调用 -->
  </div>
</template>

三、React i18next 实现示例 #

React i18next 原生支持命名空间（Namespace），天然适合模块拆分：

1. 配置i18n实例

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import enCommon from './locales/en/common.json'
import enUser from './locales/en/user.json'
import enOrder from './locales/en/order.json'
import zhCommon from './locales/zh-CN/common.json'
import zhUser from './locales/zh-CN/user.json'
import zhOrder from './locales/zh-CN/order.json'

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        common: enCommon,
        user: enUser,
        order: enOrder
      },
      'zh-CN': {
        common: zhCommon,
        user: zhUser,
        order: zhOrder
      }
    },
    lng: 'zh-CN',
    ns: ['common', 'user', 'order'], // 声明所有命名空间
    defaultNS: 'common' // 默认使用通用命名空间
  })

export default i18n

2. 组件内使用

import { useTranslation } from 'react-i18next'

// 用户登录组件
function Login() {
  const { t } = useTranslation('user') // 指定使用user命名空间
  return (
    <div>
      <h1>{t('login.title')}</h1>
      <button>{t('common:confirm')}</button> {/* 跨命名空间调用通用文本 */}
    </div>
  )
}

四、额外优化建议 #

• 拆分粒度：大型项目可进一步拆分到页面级别，比如en/user/login.json，再在en/user.json中导入合并
• 避免重复：通用文本统一放在common模块，所有组件共享
• 自动导入：用webpack的require.context或Node.js的fs模块遍历目录，自动导入所有翻译文件，减少手动维护成本

内容的提问来源于stack exchange，提问作者Sailor Moon