导入 meta
理解你的代码在哪里运行使用 `import.meta`。
import.meta
对象
使用 ES 模块,你可以从导入或编译你的 ES 模块的代码中获取一些元数据。这是通过 import.meta
实现的,它是提供这些信息给你代码的一个对象。在 Nuxt 文档中,你可能会看到使用这个来判断代码是运行在客户端还是服务器端的代码片段。
运行时 (App) 属性
这些值是静态注入的,可用于对你的运行时代码进行树摇。
属性 | 类型 | 描述 |
---|---|---|
import.meta.client | boolean | 在客户端评估时为真。 |
import.meta.browser | boolean | 在客户端评估时为真。 |
import.meta.server | boolean | 在服务器端评估时为真。 |
import.meta.nitro | boolean | 在服务器端评估时为真。 |
import.meta.dev | boolean | 在运行 Nuxt 开发服务器时为真。 |
import.meta.test | boolean | 在测试上下文中运行时为真。 |
import.meta.prerender | boolean | 在构建的预渲染阶段在服务器上渲染 HTML 时为真。 |
构建器属性
这些值在模块和你的 nuxt.config
中都可用。
属性 | 类型 | 描述 |
---|---|---|
import.meta.env | object | 等于 process.env |
import.meta.url | string | 当前文件的可解析路径。 |
示例
import.meta.url
解析模块中的文件 使用
modules/my-module/index.ts
import { createResolver } from 'nuxt/kit'
// 从当前文件相对解析
const resolver = createResolver(import.meta.url)
export default defineNuxtModule({
meta: { name: 'myModule' },
setup() {
addComponent({
name: 'MyModuleComponent',
// 解析为 '/modules/my-module/components/MyModuleComponent.vue'
filePath: resolver.resolve('./components/MyModuleComponent.vue')
})
}
})