Nuxt 3中@nuxtjs/i18n模块locales文件导入失败问题求助

问题场景 #

配置@nuxtjs/i18n模块后运行应用，出现如下报错：

Failed to resolve import "../i18n/locales/en.json" from ".nuxt/i18n.options.mjs". Does the file exist?

项目中JSON语言文件位于项目根目录的locales文件夹下，nuxt.config.ts中的i18n配置已设置langDir: "locales/"，且已验证文件路径、尝试添加斜杠，问题仍存在。

解决方案 #

1. 修正langDir的路径配置 #

将langDir改为以~/开头的项目根路径写法，确保模块能正确定位到根目录下的locales文件夹：

// nuxt.config.ts
export default defineNuxtConfig({
  // ...其他配置
  i18n: {
    lazy: true,
    langDir: "~/locales/", // 替换原有的"locales/"
    strategy: "prefix_and_default",
    locales: [
      { code: "en", name: "English", iso: "en-US", file: "en.json" },
      { code: "fr", name: "Français", iso: "fr-FR", file: "fr.json" },
    ],
    defaultLocale: "en",
  },
  // ...其他配置
});

2. 清理Nuxt缓存并重启项目 #

执行以下命令清理缓存，避免旧配置残留：

npx nuxt clean

之后重新启动开发服务器：

npm run dev

3. 检查文件命名大小写 #

如果是Linux/macOS环境，需确保en.json、fr.json的文件名大小写与配置中的完全一致（比如不要写成EN.json）。Windows环境虽然大小写不敏感，但保持一致能避免跨环境问题。

验证 #

修改配置并重启后，尝试在组件中使用i18n功能测试：

<template>
  <h1>{{ $t('welcome') }}</h1>
</template>

若能正常显示"Welcome"，则配置生效。

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