Nuxt Monorepo配置组件别名报错：Nuxt alias not found

问题详情 #

在monorepo单体仓库中，我的Nuxt项目尝试引用仓库内另一个项目的组件，配置别名后执行npm run dev报错，提示找不到组件文件。

配置代码 #

nuxt.config.ts中的别名配置：

import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss"],
  srcDir: "src",
  devServer: {
    port: 3000,
  },
  imports: {
    autoImport: false,
  },
  typescript: {
    strict: true,
    typeCheck: "build",
  },
  alias: {
    "@components": "../components/src/components",
  },
});

组件引入方式：

<template>
  <Footer />
</template>

<script lang="ts" setup>
import Footer from "@components/Footer/Footer.vue";
</script>

错误信息 #

ERROR Failed to load url
/components/src/components/Footer/Footer.vue (resolved id:
/components/src/components/Footer/Footer.vue) in
/Users/jamie/Documents/code/project/packages/project/src/pages/Layout/BaseLayout.vue.
Does the file exist?

解决办法 #

1. 改用绝对路径配置别名 #

相对路径会受srcDir设置影响，导致解析错误。使用Node.js的path模块生成绝对路径，确保路径指向准确：

import { defineNuxtConfig } from "nuxt/config";
import path from "path";

export default defineNuxtConfig({
  // 保留原有其他配置
  alias: {
    "@components": path.resolve(__dirname, "../components/src/components"),
  },
});

__dirname对应nuxt.config.ts所在的Nuxt项目根目录，path.resolve会拼接出可靠的绝对路径。

2. 校验目录结构 #

确认monorepo的目录结构和配置路径匹配，示例正确结构：

project/
├─ packages/
│  ├─ project/       # Nuxt项目
│  │  ├─ nuxt.config.ts
│  │  └─ src/
│  └─ components/    # 组件所在项目
│     └─ src/
│        └─ components/
│           └─ Footer/
│              └─ Footer.vue

如果结构不符，调整path.resolve中的路径参数即可。

3. 清除缓存重启项目 #

Nuxt缓存可能导致路径解析异常，执行以下命令后重新启动：

npx nuxt clean
npm run dev

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