---
title: "导入 meta"
description: "使用 `import.meta` 了解你的代码在哪运行。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/api/advanced/import-meta"
---
# 导入 meta

> 使用 \`import.meta\` 了解你的代码在哪运行。

## `import.meta` 对象

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

::read-more{to="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta"}
阅读有关 `import.meta` 的更多内容。
::

## 运行时（应用）属性

这些值是静态注入的，可用于对运行时代码进行摇树优化（tree-shaking）。

| 属性                                                                       | 类型      | 描述                                      |
| ------------------------------------------------------------------------ | ------- | --------------------------------------- |
| `import.meta.client`                                                     | boolean | 在客户端评估时为 True。                          |
| `import.meta.browser`                                                    | boolean | 在客户端评估时为 True。                          |
| `import.meta.server`                                                     | boolean | 在服务器端评估时为 True。                         |
| `import.meta.nitro`                                                      | boolean | 在服务器端评估时为 True。                         |
| `import.meta.dev`                                                        | boolean | 在运行 Nuxt 开发服务器时为 True。                  |
| `import.meta.envName` :badge[v4.5]{color="info" size="xs" .align-middle} | string  | 当前的 Nuxt 环境名称，包括通过 `--envName` 传入的自定义值。 |
| `import.meta.test`                                                       | boolean | 在测试上下文中运行时为 True。                       |
| `import.meta.prerender`                                                  | boolean | 在构建的预渲染阶段于服务器上渲染 HTML 时为 True。          |

## 构建器属性

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

| 属性                | 类型     | 描述                |
| ----------------- | ------ | ----------------- |
| `import.meta.env` | object | 等同于 `process.env` |
| `import.meta.url` | string | 当前文件的可解析路径。       |

## 示例

### 使用 `import.meta.url` 在模块内解析文件

```ts [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'),
    })
  },
})
```


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.