Nuxt 3配置文件中如何正确使用别名？

问题说明 #

在Nuxt 3的nuxt.config.ts中尝试用~/别名导入文件时，会触发Cannot find module '~/....'错误。

简短示例 #

nuxt.config.ts

import { book } from "~/vars";

export default defineNuxtConfig({
  runtimeConfig: {
    bookApiEndpoint: book.apiEndpoint || "",
  },
});

完整示例 #

用相对路径导入nuxt.config.ts能成功：

import { book } from "./vars";

但如果vars.ts内部用了~/别名导入其他文件，还是会报错：
vars.ts

export * from "~/entities";

entities/index.ts

export * from "./book";

entities/book.ts

export const book = {
    apiEndpoint: '/api/book'
}

解决方法 #

方法1：手动给Node.js配置别名 #

Nuxt的内置别名仅在框架启动后生效，而nuxt.config.ts是直接在Node环境中执行的，所以需要手动配置Node的模块解析别名。可以借助module-alias包实现：

1. 安装依赖：

npm install module-alias --save-dev

2. 在nuxt.config.ts最顶部添加以下代码：

import { fileURLToPath } from 'node:url'
import { dirname, join } from 'node:path'
import moduleAlias from 'module-alias'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

// 注册Nuxt常用别名
moduleAlias.addAlias('~', join(__dirname, '.'))
moduleAlias.addAlias('@', join(__dirname, '.'))

配置完成后，就能在nuxt.config.ts中正常使用~/别名导入文件，嵌套文件中的~/别名也能被正确解析。

方法2：统一使用相对路径导入 #

如果不想额外安装依赖，可以保持nuxt.config.ts用相对路径导入，同时修改被导入文件内部的别名，替换为相对路径：
比如把vars.ts中的：

export * from "~/entities";

改为：

export * from "./entities";

这种方式无需额外配置，适合小型项目或简单的导入场景。

方法3：利用Nuxt的imports全局导入（辅助方案） #

如果是全局通用的变量，可以在Nuxt配置中通过imports选项自动导入到应用中，但此方法无法直接解决nuxt.config.ts中的别名问题，仅作为补充：

export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: './vars',
        imports: ['book']
      }
    ]
  }
})

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