解析

原始檔
Nuxt Kit 提供了一組實用工具，幫助您解析路徑。這些函式允許您解析相對於當前模組的路徑，即使名稱或副檔名未知。

有時您需要解析路徑：相對於當前模組，名稱或副檔名未知。例如，您可能想新增一個與模組位於同一目錄的外掛。為了處理這些情況，Nuxt 提供了一組用於解析路徑的實用工具。resolvePath 和 resolveAlias 用於解析相對於當前模組的路徑。findPath 用於查詢給定路徑中第一個存在的檔案。createResolver 用於建立相對於基路徑的解析器。

resolvePath

解析檔案或目錄的完整路徑，遵循 Nuxt 別名和副檔名選項。如果路徑無法解析，將返回規範化的輸入路徑。

使用

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

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

型別

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

引數

path: 要解析的路徑。

options: 傳遞給解析器的選項。此物件可以具有以下屬性

屬性型別必需描述
cwdstringfalse解析路徑的基準。預設為 Nuxt rootDir。
aliasRecord<string, string>false別名物件。預設為 Nuxt 配置的別名。
extensionsstring[]false要嘗試的副檔名。預設為 Nuxt 配置的副檔名。
virtualbooleanfalse是否解析 Nuxt VFS 中存在的檔案（例如，作為 Nuxt 模板）。
fallbackToOriginalbooleanfalse如果解析的路徑不存在，是回退到原始路徑，而不是返回規範化的輸入路徑。

示例

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: 要解析的路徑。

alias: 別名物件。如果未提供，將從 nuxt.options.alias 讀取。

findPath

嘗試在給定路徑中解析第一個存在的檔案。

使用

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

export default defineNuxtModule({
  async setup (_, nuxt) {
    // Resolve main (app.vue)
    const mainComponent = await findPath([
      join(nuxt.options.srcDir, 'App'),
      join(nuxt.options.srcDir, 'app'),
    ])
  },
})

型別

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

引數

paths: 要解析的路徑或路徑陣列。

options: 傳遞給解析器的選項。此物件可以具有以下屬性

屬性型別必需描述
cwdstringfalse解析路徑的基準。預設為 Nuxt rootDir。
aliasRecord<string, string>false別名物件。預設為 Nuxt 配置的別名。
extensionsstring[]false要嘗試的副檔名。預設為 Nuxt 配置的副檔名。
virtualbooleanfalse是否解析 Nuxt VFS 中存在的檔案（例如，作為 Nuxt 模板）。
fallbackToOriginalbooleanfalse如果解析的路徑不存在，是回退到原始路徑，而不是返回規範化的輸入路徑。

createResolver

建立相對於基路徑的解析器。

觀看 Vue School 關於 createResolver 的影片。

使用

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

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

型別

function createResolver (basePath: string | URL): Resolver

引數

basePath: 要解析的基路徑。它可以是字串或 URL。

返回值

createResolver 函式返回一個具有以下屬性的物件

屬性型別描述
resolve(path: string) => string一個解析相對於基路徑的函式的函式。
resolvePath(path: string, options?: ResolvePathOptions) => Promise<string>一個解析相對於基路徑並遵循 Nuxt 別名和副檔名選項的函式的函式。

示例

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