通过 100 多个技巧学习 Nuxt！
55.5K

Import meta

使用 `import.meta` 了解代码的运行位置。

import.meta 对象

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

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

运行时 (App) 属性

这些值是静态注入的，可用于摇树优化运行时代码。

属性类型描述
import.meta.client布尔值在客户端评估时为 True。
import.meta.browser布尔值在客户端评估时为 True。
import.meta.server布尔值在服务器端评估时为 True。
import.meta.nitro布尔值在服务器端评估时为 True。
import.meta.dev布尔值运行 Nuxt 开发服务器时为 True。
import.meta.test布尔值在测试环境中运行时为 True。
import.meta.prerender布尔值在构建的预渲染阶段在服务器上渲染 HTML 时为 True。

构建器属性

这些值在模块和您的 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')
    })
  }
})

生命周期钩子

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

Nuxt 配置

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