导入元数据
使用 `import.meta` 了解代码在哪里运行。
import.meta 对象
使用 ES 模块，您可以从导入或编译 ES 模块的代码中获取一些元数据。这是通过 import.meta 完成的，它是一个对象，可以为您的代码提供这些信息。在整个 Nuxt 文档中，您可能会看到一些已经使用此功能的代码片段，以确定代码当前是在客户端还是服务器端运行。
运行时（应用程序）属性
这些值是静态注入的，可用于对运行时代码进行树形抖动。
| 属性 | 类型 | 描述 |
|---|---|---|
import.meta.client | 布尔值 | 在客户端评估时为真。 |
import.meta.browser | 布尔值 | 在客户端评估时为真。 |
import.meta.server | 布尔值 | 在服务器端评估时为真。 |
import.meta.nitro | 布尔值 | 在服务器端评估时为真。 |
import.meta.dev | 布尔值 | 在运行 Nuxt 开发服务器时为真。 |
import.meta.test | 布尔值 | 在测试上下文中运行时为真。 |
import.meta.prerender | 布尔值 | 在构建的预渲染阶段在服务器上渲染 HTML 时为真。 |
构建器属性
这些值在模块和 nuxt.config 中都可用。
| 属性 | 类型 | 描述 |
|---|---|---|
import.meta.env | 对象 | 等于 process.env |
import.meta.url | 字符串 | 当前文件的可解析路径。 |
示例
在模块中使用 import.meta.url 解析文件
modules/my-module/index.ts
import { createResolver } from 'nuxt/kit'
// Resolve relative from the current file
const resolver = createResolver(import.meta.url)
export default defineNuxtModule({
meta: { name: 'myModule' },
setup() {
addComponent({
name: 'MyModuleComponent',
// Resolves to '/modules/my-module/components/MyModuleComponent.vue'
filePath: resolver.resolve('./components/MyModuleComponent.vue')
})
}
})