如何使用@nuxtjs/i18n将多语言消息拆分为多个文件？

背景 #

我正在使用Nuxt 4搭配@nuxtjs/i18n v10.2.1，当前i18n/i18n.config.ts里的messages对象因为包含英德两种语言的约250个国家名称翻译，导致配置文件体积庞大，希望把国家翻译提取到单独文件，保持配置文件的可维护性。

当前配置 #

// i18n/i18n.config.ts
export default defineI18nConfig(() => ({
  messages: {
    de: {
      countries: { AF: 'Afghanistan', AL: 'Albanien', /* ~250个更多国家 */ },
      about: 'Über uns',
      // ...其他德语翻译
    },
    en: {
      countries: { AF: 'Afghanistan', AL: 'Albania', /* ~250个更多国家 */ },
      about: 'About',
      // ...其他英语翻译
    },
  },
}))

尝试过的方法及问题 #

我把国家翻译提取到i18n/i18n.countries.js：

export default {
  de: { AF: 'Afghanistan', /* ...其他德语国家翻译 */ },
  en: { AF: 'Afghanistan', /* ...其他英语国家翻译 */ },
}

然后在配置文件中导入：

// i18n/i18n.config.ts
import countries from './i18n.countries.js'

export default defineI18nConfig(() => ({
  messages: {
    de: { countries: countries.de, about: 'Über uns' },
    en: { countries: countries.en, about: 'About' },
  },
}))

但出现路径解析错误：

Cannot find module '/i18n/i18n.countries.js' imported from
/path/to/project/.nuxt/dev/index.mjs

问题出在defineI18nConfig文件被nuxt-i18n虚拟化，相对路径会被解析为文件系统根目录的绝对路径，而非项目根目录。我也试过改用基于文件的本地化文件（在nuxt.config.ts中配置langDir+对应语言文件），但无论文件位置和导入路径如何，都会出现相同的解析错误。

解决方案 #

方法1：使用Nuxt的~/别名导入 #

Nuxt中~/是指向项目根目录的内置别名，用它来导入文件可以避开虚拟化带来的路径问题。

1. 保持i18n/i18n.countries.js的内容不变（建议改成.ts后缀，和项目技术栈统一）
2. 修改i18n/i18n.config.ts的导入语句：

// i18n/i18n.config.ts
import countries from '~/i18n/i18n.countries'

export default defineI18nConfig(() => ({
  messages: {
    de: { countries: countries.de, about: 'Über uns', /* 其他德语翻译 */ },
    en: { countries: countries.en, about: 'About', /* 其他英语翻译 */ },
  },
}))

方法2：使用基于文件的本地化结构（推荐） #

利用@nuxtjs/i18n的langDir配置，把每个语言的翻译拆分成多个模块化文件，结构更清晰，便于长期维护。

1. 更新nuxt.config.ts中的i18n配置，添加langDir和可选的lazy配置：

// nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    strategy: 'prefix_except_default',
    defaultLocale: 'en',
    locales: [
      { name: 'Deutsch', code: 'de', language: 'de-CH' },
      { name: 'English', code: 'en', language: 'en-US' },
    ],
    langDir: 'i18n/locales/', // 指定语言文件存放目录
    lazy: true, // 启用懒加载，优化首次加载性能（可选）
  },
})

2. 创建对应的文件结构：

• i18n/locales/de.ts（德语翻译入口）：

import countries from '../countries/de'

export default {
  countries,
  about: 'Über uns',
  // ...其他德语翻译
}

• i18n/locales/en.ts（英语翻译入口）：

import countries from '../countries/en'

export default {
  countries,
  about: 'About',
  // ...其他英语翻译
}

• i18n/countries/de.ts（德语国家翻译）：

export default {
  AF: 'Afghanistan',
  AL: 'Albanien',
  // ...其他德语国家翻译
}

• i18n/countries/en.ts（英语国家翻译）：

export default {
  AF: 'Afghanistan',
  AL: 'Albania',
  // ...其他英语国家翻译
}

关键提示 #

• 不要在defineI18nConfig中直接使用相对路径导入文件，优先用Nuxt的~/别名或者基于langDir的模块化结构。
• 基于文件的本地化结构更适合翻译内容较多的场景，能按功能模块拆分翻译文件，方便多人协作和后续维护。

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