---
title: "Resolving"
description: "Nuxt Kit provides utilities to resolve paths from the Nuxt root directory or a custom base."
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/api/kit/resolving"
---
# Resolving

> Nuxt Kit provides utilities to resolve paths from the Nuxt root directory or a custom base.

Sometimes you need to resolve a path without knowing its name or extension. For example, you may want to add a plugin that is located in the same directory as a module. To handle these cases, Nuxt provides a set of utilities to resolve paths. `resolvePath` resolves paths from the Nuxt root directory by default, while `resolveAlias` applies configured aliases. `findPath` finds the first existing file in a given set of paths. `createResolver` creates a resolver relative to a base path.

## `resolvePath`

解析文件或目录的完整路径，并遵循 Nuxt 的别名和扩展名选项。如果某个路径无法解析，将返回标准化后的输入路径。

### 用法

```ts
import { defineNuxtModule, resolvePath } from '@nuxt/kit'

export default defineNuxtModule({
  async setup () {
    const entrypoint = await resolvePath('@unhead/vue')
    console.log(`Unhead 入口点是 ${entrypoint}`)
  },
})
```

### 类型

```ts
function resolvePath (path: string, options?: ResolvePathOptions): Promise<string>
```

### 参数

**`path`**：要解析的路径。

**`options`**：传递给解析器的选项。该对象可以包含以下属性：

| 属性                   | 类型                                  | 是否必需    | 描述                                     |
| -------------------- | ----------------------------------- | ------- | -------------------------------------- |
| `cwd`                | `string`                            | `false` | 用于解析路径的基础位置。默认是 Nuxt 的 rootDir。        |
| `alias`              | `Record<string, string>`{lang="ts"} | `false` | 一个别名对象。默认是 Nuxt 配置的别名。                 |
| `extensions`         | `string[]`                          | `false` | 要尝试的文件扩展名。默认是 Nuxt 配置的扩展名。             |
| `virtual`            | `boolean`                           | `false` | 是否解析存在于 Nuxt 虚拟文件系统（例如，作为 Nuxt 模板）的文件。 |
| `fallbackToOriginal` | `boolean`                           | `false` | 如果解析后的路径不存在，是否回退到原始路径，而不是返回规范化后的输入路径。  |

::note
`resolvePath` follows standard module resolution and does not search dependencies nested inside other packages. To resolve a dependency declared by your Nuxt module, use `createResolver(import.meta.url).resolvePath()`. This makes resolution independent of whether the package manager hoists the dependency.
::

### Example

```ts
import { defineNuxtModule, resolvePath } from '@nuxt/kit'
import { join } from 'pathe'

const headlessComponents: ComponentGroup[] = [
  {
    relativePath: 'combobox/combobox.js',
    chunkName: 'headlessui/combobox',
    exports: [
      'Combobox',
      'ComboboxLabel',
      'ComboboxButton',
      'ComboboxInput',
      'ComboboxOptions',
      'ComboboxOption',
    ],
  },
]

export default defineNuxtModule({
  meta: {
    name: 'nuxt-headlessui',
    configKey: 'headlessui',
  },
  defaults: {
    prefix: 'Headless',
  },
  async setup (options) {
    const entrypoint = await resolvePath('@headlessui/vue')
    const root = join(entrypoint, '../components')

    for (const group of headlessComponents) {
      for (const e of group.exports) {
        addComponent(
          {
            name: e,
            export: e,
            filePath: join(root, group.relativePath),
            chunkName: group.chunkName,
            mode: 'all',
          },
        )
      }
    }
  },
})
```

## `resolveAlias`

解析路径别名，遵循 Nuxt 的别名选项。

### 类型

```ts
function resolveAlias (path: string, alias?: Record<string, string>): string
```

### 参数

**`path`**：要解析的路径。

**`alias`**：一个别名对象。如果未提供，将从 `nuxt.options.alias` 中读取。

## `findPath`

尝试在给定的一组路径中解析第一个存在的文件。

### 用法

```ts
import { defineNuxtModule, findPath } from '@nuxt/kit'
import { join } from 'pathe'

export default defineNuxtModule({
  async setup (_, nuxt) {
    // 解析主文件（app.vue）
    const mainComponent = await findPath([
      join(nuxt.options.srcDir, 'App'),
      join(nuxt.options.srcDir, 'app'),
    ])
  },
})
```

### 类型

```ts
function findPath (paths: string | string[], options?: ResolvePathOptions, pathType: 'file' | 'dir'): Promise<string | null>
```

### 参数

**`paths`**：要解析的路径或路径数组。

**`options`**：传递给解析器的选项。该对象可以包含以下属性：

| 属性                   | 类型                                  | 是否必需    | 描述                                     |
| -------------------- | ----------------------------------- | ------- | -------------------------------------- |
| `cwd`                | `string`                            | `false` | 用于解析路径的基础位置。默认是 Nuxt 的 rootDir。        |
| `alias`              | `Record<string, string>`{lang="ts"} | `false` | 一个别名对象。默认是 Nuxt 配置的别名。                 |
| `extensions`         | `string[]`                          | `false` | 要尝试的文件扩展名。默认是 Nuxt 配置的扩展名。             |
| `virtual`            | `boolean`                           | `false` | 是否解析存在于 Nuxt 虚拟文件系统（例如，作为 Nuxt 模板）的文件。 |
| `fallbackToOriginal` | `boolean`                           | `false` | 如果解析后的路径不存在，是否回退到原始路径，而不是返回规范化后的输入路径。  |

## `createResolver`

创建相对于基路径的解析器。

::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/resolving-paths-and-injecting-assets-to-the-app?friend=nuxt" target="_blank"}
观看关于 createResolver 的 Vue School 视频。
::

### 用法

```ts
import { createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (_, nuxt) {
    const { resolve, resolvePath } = createResolver(import.meta.url)
  },
})
```

### 类型

```ts
function createResolver (basePath: string | URL): Resolver
```

### 参数

**`basePath`**：用于解析的基路径。可以是字符串或 URL。

### 返回值

`createResolver` 函数返回一个具有以下属性的对象：

| 属性            | 类型                                                                           | 描述                               |
| ------------- | ---------------------------------------------------------------------------- | -------------------------------- |
| `resolve`     | `(path: string) => string`{lang="ts"}                                        | 一个根据基路径解析路径的函数。                  |
| `resolvePath` | `(path: string, options?: ResolvePathOptions) => Promise<string>`{lang="ts"} | 一个根据基路径解析路径并遵循 Nuxt 别名和扩展名选项的函数。 |

### Example

```ts
import { createResolver, defineNuxtModule, isNuxt2 } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)

    nuxt.hook('modules:done', () => {
      if (isNuxt2()) {
        addPlugin(resolver.resolve('./runtime/plugin.vue2'))
      } else {
        addPlugin(resolver.resolve('./runtime/plugin.vue3'))
      }
    })
  },
})
```

---

- [源码](https://github.com/nuxt/nuxt/blob/main/packages/kit/src/resolve.ts)


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.