Nuxt 3中@别名解析失败，共享目录引用报错求助

正确的别名配置方式 #

在Nuxt 3中配置别名需要结合Node的路径工具生成稳定的绝对路径，避免热重载时出现路径解析异常。修改你的nuxt.config.ts如下：

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'
import { fileURLToPath } from 'node:url'
import { dirname, resolve } from 'node:path'

// 适配ESM模块，正确获取当前文件的绝对路径
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

export default defineNuxtConfig({
  // 配置@shared别名指向项目根目录下的shared文件夹
  alias: {
    '@shared': resolve(__dirname, './shared')
  },
  // 若使用TypeScript，同步配置tsconfig路径映射，避免TS语法报错
  typescript: {
    tsConfig: {
      compilerOptions: {
        paths: {
          '@shared/*': ['./shared/*']
        }
      }
    }
  }
})

配置完成后，即可正常使用import {UserValidator} from "@shared/validators"导入文件。

无需额外配置的替代方案 #

如果别名配置仍有问题，可以直接使用Nuxt 3内置的~/别名（默认指向项目根目录），将shared目录放在项目根目录下，直接通过以下方式导入：

import {UserValidator} from "~/shared/validators"

额外注意事项 #

• 确保shared目录下的文件采用ESM模块规范（使用export/import，避免require），Nuxt 3默认以ESM优先。
• 检查文件大小写：Linux/macOS环境下文件名区分大小写，若代码中引用的文件名与实际文件大小写不一致，可能导致随机报错。
• 清理缓存：执行以下命令清理依赖和Nuxt缓存，解决缓存导致的路径解析异常：

  rm -rf node_modules .nuxt package-lock.json
  npm install
  

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