v3.16
Nuxt on GitHub

<DevOnly>

源代码
使用 <DevOnly> 组件仅在开发期间渲染组件。

Nuxt 提供了 <DevOnly> 组件，用于仅在开发期间渲染组件。

在生产构建中，这些内容将不会被包含。

pages/example.vue
<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- 此组件仅在开发期间渲染 -->
      <LazyDebugBar />

      <!-- 如果您需要在生产环境中提供替代内容 -->
      <!-- 请确保使用 `nuxt preview` 进行测试 -->
      <template #fallback>
        <div><!-- 用于 flex.justify-between 的空 div --></div>
      </template>
    </DevOnly>
  </div>
</template>

插槽

  • #fallback：如果您需要在生产环境中提供替代内容。
<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- 此组件仅在开发期间渲染 -->
      <LazyDebugBar />
      <!-- 请确保使用 `nuxt preview` 进行测试 -->
      <template #fallback>
        <div><!-- 用于 flex.justify-between 的空 div --></div>
      </template>
    </DevOnly>
  </div>
</template>