跳到主要内容

Import meta

使用 `import.meta` 了解你的代码运行在何处。

import.meta 对象

借助 ES 模块,你可以从导入或编译你的 ES 模块的代码处获取一些元数据。 这是通过 import.meta 实现的,它是一个为你的代码提供这些信息的对象。 在 Nuxt 文档中,你可能会看到已经在使用它的代码片段,用于判断 代码当前是运行在客户端还是服务端。

阅读更多

了解更多关于 import.meta 的内容。 :

运行时(应用)属性

这些值是静态注入的,可用于对运行时代码进行 tree-shaking。

process.browserprocess.clientprocess.devprocess.serverprocess.test 在 Nuxt 3.12 中已被软弃用。在 Nuxt 5 或 future.compatibilityVersion: 5 中,Nuxt 不再使用这些属性增强 NodeJS.Process。建议使用对应的 import.meta.* 标志;构建时的 process.* 定义出于兼容性考虑仍然存在。 :

属性类型描述
import.meta.clientboolean在客户端求值时为 true。
import.meta.browserboolean在客户端求值时为 true。
import.meta.serverboolean在服务端求值时为 true。
import.meta.nitroboolean在服务端求值时为 true。
import.meta.devboolean运行 Nuxt 开发服务器时为 true。
import.meta.envName v4.5string当前的 Nuxt 环境名称,包括通过 --envName 传入的自定义值。
import.meta.testboolean在测试上下文中运行时为 true。
import.meta.prerenderboolean在构建的预渲染阶段于服务端渲染 HTML 时为 true。

构建器属性

这些值在模块和你的 nuxt.config 中都可用。

属性类型描述
import.meta.envobject等同于 process.env
import.meta.urlstring当前文件的可解析路径。

示例

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