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

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

<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>