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