路径解析
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'))
}
})
}
})