v3.16
GitHub

<DevOnly>

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

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

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

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

      <!-- 如果你在生产期间需要有替代品 -->
      <!-- 一定要使用 `nuxt preview` 测试这些 -->
      <template #fallback>
        <div><!-- 空 div 用于 flex.justify-between --></div>
      </template>
    </DevOnly>
  </div>
</template>

插槽

  • #fallback: 如果你在生产期间需要有替代品。
<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- 这个组件仅在开发期间渲染 -->
      <LazyDebugBar />
      <!-- 一定要使用 `nuxt preview` 测试这些 -->
      <template #fallback>
        <div><!-- 空 div 用于 flex.justify-between --></div>
      </template>
    </DevOnly>
  </div>
</template>