在Nuxt.js中使用nuxt/i18n多语言文件时如何访问导入模块内容

问题原因 #

你当前的写法不符合nuxt/i18n的语言文件规范：nuxt/i18n要求语言文件导出的是纯JSON结构的普通对象，不能包含data()这类方法，你在index.js中定义的data方法不会被i18n解析，因此无法读取about.js内的翻译内容。

修正写法 #

1. 根级直接展开（适合模块数量少的小型场景） #

直接用对象展开运算符把about.js的内容合并到根翻译对象中：

import about from './about.js'

export default {
  // 展开about模块的所有翻译字段到根级
  ...about,
  home: 'خانه',
  posts: 'پست ها',
  about: 'درباره ما',
  paragraph: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چ',
  homepage: {
    title: 'عنوان تستی',
    subtitle: 'توضیحات'
  }
}

调用方式：直接通过$t('aboutUsTitle')访问对应翻译。

2. 命名空间嵌套（推荐大型项目使用） #

将about模块挂载到独立命名空间下，避免不同模块出现同名字段冲突：

import about from './about.js'

export default {
  home: 'خانه',
  posts: 'پست ها',
  about: 'درباره ما',
  paragraph: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چ',
  homepage: {
    title: 'عنوان تستی',
    subtitle: 'توضیحات'
  },
  // 挂载about模块到about命名空间
  about
}

调用方式：通过$t('about.aboutUsTitle')访问对应翻译，结构更清晰，便于后续维护。

大型项目进阶优化：自动批量导入模块 #

如果语言模块数量多，可以不用手动逐个导入，通过构建工具能力自动批量导入所有语言文件，降低维护成本：

• Vite环境示例：

// 自动读取当前目录下所有js文件，排除index.js自身
const modules = import.meta.glob('./*.js', { eager: true })
const langModules = {}

Object.keys(modules).forEach(filePath => {
  if (filePath === './index.js') return
  // 取文件名作为命名空间名称
  const moduleName = filePath.replace(/^\.\/(.*)\.js$/, '$1')
  langModules[moduleName] = modules[filePath].default
})

export default {
  home: 'خانه',
  posts: 'پست ها',
  about: 'درباره ما',
  paragraph: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چ',
  homepage: {
    title: 'عنوان تستی',
    subtitle: 'توضیحات'
  },
  // 批量挂载所有语言模块
  ...langModules
}

后续新增语言模块只需要在对应目录新建js文件即可，无需修改index.js的导入逻辑。

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