---
title: "<DevOnly>"
description: "使用 <DevOnly> 组件仅在开发环境中渲染组件。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/api/components/dev-only"
---
# \<DevOnly>

> 使用 \<DevOnly> 组件仅在开发环境中渲染组件。

Nuxt 提供了 `<DevOnly>` 组件，用于仅在开发环境中渲染组件。

内容不会包含在生产构建中。

```vue [pages/example.vue]
<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- 该组件仅在开发环境中渲染 -->
      <LazyDebugBar />

      <!-- 如果你需要在生产环境中有替代内容 -->
      <!-- 请务必使用 `nuxt preview` 来测试这些内容 -->
      <template #fallback>
        <div><!-- 用于 flex.justify-between 的空 div --></div>
      </template>
    </DevOnly>
  </div>
</template>
```

## 插槽

- `#fallback`：如果你需要在生产环境中有替代内容。

```vue
<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- 该组件仅在开发环境中渲染 -->
      <LazyDebugBar />
      <!-- 请务必使用 `nuxt preview` 来测试这些内容 -->
      <template #fallback>
        <div><!-- 用于 flex.justify-between 的空 div --></div>
      </template>
    </DevOnly>
  </div>
</template>
```

---

- [源码](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/dev-only.ts)


## Sitemap

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