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

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

## `import.meta` 对象

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

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

## 运行时（应用）属性

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

| 属性                      | 类型      | 说明                        |
| ----------------------- | ------- | ------------------------- |
| `import.meta.client`    | boolean | 在客户端评估时为真。                |
| `import.meta.browser`   | boolean | 在客户端评估时为真。                |
| `import.meta.server`    | boolean | 在服务器端评估时为真。               |
| `import.meta.nitro`     | boolean | 在服务器端评估时为真。               |
| `import.meta.dev`       | boolean | 在运行 Nuxt 开发服务器时为真。        |
| `import.meta.test`      | boolean | 在测试环境中运行时为真。              |
| `import.meta.prerender` | boolean | 在构建的预渲染阶段服务器端渲染 HTML 时为真。 |

## 构建器属性

这些值在模块和你的 `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.