透過 100 多個技巧的集合來學習 Nuxt!

<DevOnly>

僅在開發期間使用 <DevOnly> 元件渲染元件。

Nuxt 提供了 <DevOnly> 元件,僅在開發期間渲染元件。

內容將不會包含在正式版本的建置中。

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>

插槽

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