扩展 Nuxt 3 配置 - 添加导入路径的别名

Question

我将

nuxt 3.2.0

与

Vite

一起使用。在 Nuxt 3 项目的 Nuxt 配置（即

nuxt.config.ts

）中，如果要添加路径别名，可以将其添加到

alias

属性（参见文档）。

我为组件目录添加了一个别名：

// ...
alias: {
  '@/*': './components/*'
},
// ...

它已添加到

.nuxt/tsconfig.json

：

"@/*": [
  "./components/*"
],

如果我尝试使用该别名导入某些内容，则不会出现智能感知错误，并且我可以按住 Ctrl 键单击路径并访问该文件。

import { some } from '@/Something/something';

但是编译器崩溃了，出现了 500 错误，

"Vite Error"

，

[[vite-node] [ERR_LOAD_URL]:

，我也得到了

Failed to load url /Something/something

。

所以该路径不包含别名。

如果我将其更改为相对路径，它就起作用了：

import { some } from './something';

不知道我是否漏掉了什么？

Answer 1

我不太确定，但认为你混淆了一些事情。因此尝试编辑/更正您的答案。

你的

nuxt.config.ts

必须看起来像这样：

export default defineNuxtConfig({
    alias: {
        "@Components": "./components",
    }
})

要在您的代码库中启用以下导入语句：

import { some } from '@Components/something';

我认为你的问题的根源在于你的配置中使用

/*

。

正如您正确指出的那样，tsconfig 由 Nuxt 自动生成。

Answer 2

@Galivan 您可能不需要您已完成的自定义配置。当查看 Nuxt3 中有关

alias

的默认配置代码时，已经配置了一些有用的默认值。

注意：如果您使用 Webpack，则图像和 CSS 导入 has 可以使用波浪号 (~) 进行引用。 https://github.com/nuxt/nuxt/blob/main/packages/schema/src/config/common.ts#L309

因为我使用

components

文件夹，所以我的 Nuxt 配置中有以下内容：

components: [
  {
    path: "~/components",
    pathPrefix: false,
  },
],

如果你想为你的组件目录设置一个别名，我相信它应该看起来像这样：

alias: {
  'components': fileURLToPath(new URL('./components', import.meta.url)),
}