55K

导入元数据

使用 import.meta 来理解你的代码运行在什么地方。

import.meta 对象

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

阅读有关 import.meta 的更多信息。

运行时（应用）属性

这些值是静态注入的，可以用来对你的运行时代码进行树摇。

属性类型描述
import.meta.clientboolean当在客户端侧评估时为真。
import.meta.browserboolean当在客户端侧评估时为真。
import.meta.serverboolean当在服务器侧评估时为真。
import.meta.nitroboolean当在服务器侧评估时为真。
import.meta.devboolean当运行 Nuxt 开发服务器时为真。
import.meta.testboolean当在测试上下文中运行时为真。
import.meta.prerenderboolean当在构建的预渲染阶段在服务器上渲染 HTML 时为真。

构建器属性

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

属性类型描述
import.meta.env对象等于 process.env
import.meta.url字符串当前文件的解析路径。

例子

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

生命周期钩子

Nuxt 提供了一个强大的钩子系统，可以扩展几乎所有的方面使用钩子。

Nuxt 配置文件

发现您可以在 nuxt.config.ts 文件中使用的所有选项。