解析
Nuxt Kit 提供一組實用工具，協助您解析路徑。這些函數允許您解析相對於目前模組、具有未知名稱或副檔名的路徑。
有時候您需要解析路徑：相對於目前模組、具有未知名稱或副檔名。例如，您可能想要新增一個與模組位於相同目錄的外掛程式。為了處理這些情況，nuxt 提供了一組實用工具來解析路徑。resolvePath 和 resolveAlias 用於解析相對於目前模組的路徑。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'))
}
})
}
})