Nuxt 3项目中tsconfig路径无法解析父目录文件的问题排查求助

这个问题的核心原因是：TypeScript 的 tsconfig.json 里的 paths 配置只负责类型检查阶段的路径解析，而 Nuxt 3 底层依赖的 Vite 并不会自动读取这个配置来处理运行时的模块导入。所以你会看到类型检查可能没问题，但运行时 Vite 找不到对应的文件。

下面是两种可行的解决方案：

方案一：使用 Nuxt 内置的别名配置（推荐） #

Nuxt 提供了统一的别名配置入口，配置后会自动同步到 Vite、TypeScript 和其他构建工具，不用重复配置。

在你的 web-ui/nuxt.config.ts 中添加如下配置：

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  // 配置别名映射
  alias: {
    '~shared': '../shared'
  },
  typescript: {
    // 可选：开启严格类型检查（根据你的项目需求调整）
    strict: true,
    // 配置 TypeScript 的 rootDirs，让 TS 识别共享目录
    tsConfig: {
      compilerOptions: {
        rootDirs: [".", "../shared"]
      }
    }
  }
})

配置完成后，你可以删除 tsconfig.json 里的 paths 配置了——因为 Nuxt 会自动把你定义的别名同步到 .nuxt/tsconfig.json 中，TS 编译器依然能识别这个别名。

方案二：直接配置 Vite 的解析别名 #

如果你更倾向于手动配置 Vite，可以在 nuxt.config.ts 中直接修改 Vite 的 resolve 选项：

import { defineNuxtConfig } from 'nuxt/config'
import path from 'path'

export default defineNuxtConfig({
  vite: {
    resolve: {
      alias: {
        // 使用绝对路径确保 Vite 能正确定位
        '~shared': path.resolve(__dirname, '../shared')
      }
    }
  },
  typescript: {
    tsConfig: {
      compilerOptions: {
        paths: {
          '~shared/*': ['../shared/*']
        },
        rootDirs: [".", "../shared"]
      }
    }
  }
})

最后需要注意的点 #

1. 重启 Nuxt 服务：修改配置后必须重启开发服务器，否则新的别名配置不会生效。
2. 检查文件导出：确保 shared/foo.ts 里正确导出了 useFoo，比如：

   export const useFoo = () => {
     return 'Hello from shared'
   }
   

3. 导入语法修正：你的 index.ts 里写的是 const foo = useFoo;，如果 useFoo 是函数，应该改成 const foo = useFoo();，避免页面显示函数本身。

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