v3.17

解析

Source
Nuxt Kit 提供了一组实用程序来帮助你解析路径。这些函数允许你解析相对于当前模块的路径，即使名称或扩展名未知。

有时你需要解析路径：相对于当前模块，名称或扩展名未知。例如，你可能想要添加一个与模块位于同一目录中的插件。为了处理这种情况，nuxt 提供了一组实用程序来解析路径。resolvePath 和 resolveAlias 用于解析相对于当前模块的路径。findPath 用于查找给定路径中的第一个现有文件。createResolver 用于创建相对于基路径的解析器。

¥Sometimes you need to resolve a paths: relative to the current module, with unknown name or extension. For example, you may want to add a plugin that is located in the same directory as the module. To handle this cases, nuxt provides a set of utilities to resolve paths. resolvePath and resolveAlias are used to resolve paths relative to the current module. findPath is used to find first existing file in given paths. createResolver is used to create resolver relative to base path.

resolvePath

根据 Nuxt 别名和扩展选项解析文件或目录的完整路径。如果无法解析路径，将返回规范化的输入路径。

¥Resolves full path to a file or directory respecting Nuxt alias and extensions options. If path could not be resolved, normalized input path will be returned.

类型

¥Type

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

参数

¥Parameters

path

类型：string

¥Type: string

必需：true

¥Required: true

解析路径。

¥Path to resolve.

options

类型：ResolvePathOptions

¥Type: ResolvePathOptions

默认：{}

¥Default: {}

传递给解析器的选项。此对象可以具有以下属性：

¥Options to pass to the resolver. This object can have the following properties:

  • cwd（可选）
    类型：string
    默认：process.cwd()
    当前工作目录。
  • alias（可选）
    类型：Record<string, string>
    默认：{}
    别名映射。
  • extensions（可选）
    类型：string[]
    默认：['.js', '.mjs', '.ts', '.jsx', '.tsx', '.json']
    可供尝试的扩展。

示例

¥Examples

// https://github.com/P4sca1/nuxt-headlessui
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 别名选项解析路径别名。

¥Resolves path aliases respecting Nuxt alias options.

类型

¥Type

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

参数

¥Parameters

path

类型：string

¥Type: string

必需：true

¥Required: true

解析路径。

¥Path to resolve.

alias

类型：Record<string, string>

¥Type: Record<string, string>

默认：{}

¥Default: {}

别名映射。如果未提供，则将从 nuxt.options.alias 读取。

¥Alias map. If not provided, it will be read from nuxt.options.alias.

findPath

尝试解析给定路径中第一个现有文件。

¥Try to resolve first existing file in given paths.

类型

¥Type

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

interface ResolvePathOptions {
  cwd?: string
  alias?: Record<string, string>
  extensions?: string[]
}

参数

¥Parameters

paths

类型：string | string[]

¥Type: string | string[]

必需：true

¥Required: true

要解析的路径或路径数组。

¥A path or an array of paths to resolve.

options

类型：ResolvePathOptions

¥Type: ResolvePathOptions

默认：{}

¥Default: {}

传递给解析器的选项。此对象可以具有以下属性：

¥Options to pass to the resolver. This object can have the following properties:

  • cwd（可选）
    类型：string
    默认：process.cwd()
    当前工作目录。
  • alias（可选）
    类型：Record<string, string>
    默认：{}
    别名映射。
  • extensions（可选）
    类型：string[]
    默认：['.js', '.mjs', '.ts', '.jsx', '.tsx', '.json']
    可供尝试的扩展。

pathType

类型：'file' | 'dir'

¥Type: 'file' | 'dir'

默认：'file'

¥Default: 'file'

要解析的路径类型。如果设置为 'file'，该函数将尝试解析文件。如果设置为 'dir'，该函数将尝试解析目录。

¥Type of path to resolve. If set to 'file', the function will try to resolve a file. If set to 'dir', the function will try to resolve a directory.

createResolver

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

¥Creates resolver relative to base path.

观看 Vue School 的视频，了解如何创建解析器。¥Watch Vue School video about createResolver.

类型

¥Type

function createResolver (basePath: string | URL): Resolver

interface Resolver {
  resolve (...path: string[]): string
  resolvePath (path: string, options?: ResolvePathOptions): Promise<string>
}

interface ResolvePathOptions {
  cwd?: string
  alias?: Record<string, string>
  extensions?: string[]
}

参数

¥Parameters

basePath

类型：string

¥Type: string

必需：true

¥Required: true

解析的基本路径。

¥Base path to resolve from.

示例

¥Examples

// https://github.com/vuejs/pinia/blob/v2/packages/nuxt
import {
  defineNuxtModule,
  isNuxt2,
  createResolver,
} 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'))
      }
    })
  }
})