Nuxt3 中文课程 《实战全栈开发简书》.

Resolving

Nuxt Kit 提供了一组工具,帮助你解析路径。这些函数允许你解析相对于当前模块的路径,包括未知的名称或扩展名。

有时你需要解析路径:相对于当前模块,包括未知的名称或扩展名。例如,你可能想要添加一个位于与模块相同目录下的插件。为了处理这些情况,Nuxt 提供了一组工具来解析路径。resolvePathresolveAlias 用于解析相对于当前模块的路径。findPath 用于在给定的路径中找到第一个存在的文件。createResolver 用于创建相对于基础路径的解析器。

resolvePath

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

类型

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

参数

path

类型string

必填true

要解析的路径。

options

类型ResolvePathOptions

默认值{}

要传递给解析器的选项。该对象可以具有以下属性:

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

示例

// 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 的别名选项解析路径别名。

类型

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

参数

path

类型string

必填true

要解析的路径。

alias

类型Record<string, string>

默认值{}

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

findPath

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

类型

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

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

参数

paths

类型string | string[]

必填true

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

options

类型ResolvePathOptions

默认值{}

要传递给解析器的选项。该对象可以具有以下属性:

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

pathType

类型'file' | 'dir'

默认值'file'

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

createResolver

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

类型

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[]
}

参数

basePath

类型string

必填true

要解析的基础路径。

示例

// 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'))
      }
    })
  }
})