Nuxt3中vueI18n+intlify加载同语言多文件失败问题

问题原因 #

@intlify/nuxt3 默认只会自动加载语言文件夹下与语言名称同名的文件（如locales/en/en.yml），同目录下的其他文件不会自动合并到该语言的消息集中，需要通过命名空间或者手动配置实现加载。

解决方案 #

方案一：利用自动命名空间加载（推荐） #

确保文件结构和配置正确，让intlify自动将额外文件作为命名空间加载：

1. 确认文件结构：

   locales/
     en/
       en.yml          # 主语言文件（根消息）
       en-extended.yml # 扩展文件（自动作为en语言下的"en-extended"命名空间）
   

2. 验证localeDir路径：
   在nuxt.config.js中，确保localeDir指向正确的目录（如果nuxt.config.js在项目根目录，locales也在根目录，路径应为./locales而非../locales）：

   intlify: {
       localeDir: "./locales",
       vueI18n: {
         locale: "en",
         fallbackLocale: "en",
       },
     },
   

3. 检查YAML语法：
   确保en-extended.yml的格式正确，比如：

   default:
     extendedMessage: "This is the extended content"
   

4. 清除缓存重启：
   删除.nuxt文件夹和node_modules/.cache目录，重新启动项目，避免缓存导致的加载异常。
5. 正确访问内容：
   通过命名空间访问扩展文件内容：

   <p>{{ $t("en-extended.default.extendedMessage") }}</p>
   

方案二：手动合并消息文件 #

如果自动加载失效，可手动导入并合并所有同语言文件：

1. 安装依赖：
   安装YAML解析包：

   npm install yaml
   

2. 修改nuxt.config.js：

   import { readFileSync } from 'fs'
   import { resolve } from 'path'
   import yaml from 'yaml'
   
   // 加载指定语言的所有yml文件并合并
   function loadLocaleMessages(locale) {
     const localePath = resolve(__dirname, './locales', locale)
     const files = require('fs').readdirSync(localePath)
     const messages = {}
   
     files.forEach(file => {
       if (file.endsWith('.yml')) {
         const fileName = file.replace('.yml', '')
         const fileContent = yaml.parse(readFileSync(resolve(localePath, file), 'utf-8'))
         // 主文件（en.yml）作为根消息，其他文件作为命名空间
         if (fileName === locale) {
           Object.assign(messages, fileContent)
         } else {
           messages[fileName] = fileContent
         }
       }
     })
     return messages
   }
   
   export default defineNuxtConfig({
     modules: ['@intlify/nuxt3'],
     intlify: {
       localeDir: "./locales",
       vueI18n: {
         locale: "en",
         fallbackLocale: "en",
         messages: {
           en: loadLocaleMessages('en')
         }
       },
     },
   })
   

3. 访问方式不变：
   依然使用$t("en-extended.default.extendedMessage")访问扩展内容。

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