v3.17

<DevOnly>

Source
仅在开发过程中使用 <DevOnly> 组件渲染组件。

Nuxt 提供 <DevOnly> 组件，仅在开发阶段渲染组件。

¥Nuxt provides the <DevOnly> component to render a component only during development.

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

¥The content will not be included in production builds.

pages/example.vue
<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- this component will only be rendered during development -->
      <LazyDebugBar />

      <!-- if you ever require to have a replacement during production -->
      <!-- be sure to test these using `nuxt preview` -->
      <template #fallback>
        <div><!-- empty div for flex.justify-between --></div>
      </template>
    </DevOnly>
  </div>
</template>

插槽

¥Slots

  • #fallback：如果你在生产过程中需要替换。
<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- this component will only be rendered during development -->
      <LazyDebugBar />
      <!-- be sure to test these using `nuxt preview` -->
      <template #fallback>
        <div><!-- empty div for flex.justify-between --></div>
      </template>
    </DevOnly>
  </div>
</template>