Nuxt 3执行generate命令时如何避免生成草稿文章？

方案1：查询内容时过滤草稿（推荐） #

在获取文章列表或单篇文章的逻辑中，根据环境变量判断是否过滤draft: true的内容：

比如在文章列表页面（如pages/blog/index.vue）：

<script setup>
const isDev = process.dev
// 查询文章，生产模式下排除草稿
const { data: posts } = await useContent('articles')
  .where(isDev ? {} : { draft: { $ne: true } })
  .sort({ createdAt: -1 })
  .fetch()
</script>

对于单篇文章页面（如pages/blog/[slug].vue），同样需要在获取数据时过滤，避免直接通过slug访问到草稿文章：

<script setup>
const route = useRoute()
const isDev = process.dev

const { data: post } = await useContent('articles')
  .where({ 
    slug: route.params.slug,
    ...(isDev ? {} : { draft: { $ne: true } })
  })
  .fetch()

// 如果生产模式下未找到非草稿文章，跳转404
if (!post && !isDev) {
  throw createError({ statusCode: 404, statusMessage: '文章不存在' })
}
</script>

方案2：通过Nuxt钩子全局禁用草稿解析 #

在nuxt.config.ts中添加钩子，生产模式下直接跳过草稿文件的解析：

export default defineNuxtConfig({
  hooks: {
    // 在解析文件前判断，禁用草稿
    'content:file:beforeParse'(file) {
      if (!process.dev && file.frontmatter?.draft) {
        file._disabled = true
      }
    }
  }
})

方案3：手动配置生成路由 #

如果站点依赖静态路由生成，可在nuxt.config.ts中动态生成仅包含非草稿文章的路由：

export default defineNuxtConfig({
  generate: {
    async routes() {
      // 仅获取非草稿文章
      const { data: posts } = await useContent('articles')
        .where({ draft: { $ne: true } })
        .fetch()
      // 返回生成路由
      return posts.map(post => `/blog/${post.slug}`)
    }
  }
})

额外注意 #

执行npm run generate前，建议先删除.output目录，避免缓存的草稿文件残留。

内容的提问来源于stack exchange，提问作者Blackernel