Nuxt generate未等待Nitro插件执行完成致数据为空的问题

问题本质 #

nuxt generate做静态打包时，默认不会等你Nitro插件里的异步爬虫任务跑完就直接结束构建了——结果就是Playwright还没爬到数据，空的db数组已经被打包进静态文件，preview的时候自然拿不到数据。

具体操作步骤 #

1. 先把插件的异步逻辑写对 #

你的Nitro插件（一般在server/plugins/目录下）必须是异步导出的，把Playwright的爬取逻辑全放进异步函数里：

// server/plugins/scraper.ts
export default defineNitroPlugin(async () => {
  const db = useStorage('db')
  // 启动Playwright无头浏览器（generate环境必须用无头模式）
  const browser = await chromium.launch({ headless: 'new' })
  const page = await browser.newPage()
  
  try {
    await page.goto('你要爬取的目标页面URL')
    // 替换成你的实际数据提取逻辑
    const scrapedData = await page.evaluate(() => {
      return Array.from(document.querySelectorAll('.target-element')).map(el => el.innerText)
    })
    // 将爬取结果存入db
    await db.setItem('scrapedItems', scrapedData)
  } finally {
    // 无论成功失败都要关闭浏览器实例
    await page.close()
    await browser.close()
  }
})

2. 让Generate等待插件执行完成 #

在nuxt.config.ts中添加Nitro配置，开启预渲染等待机制：

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      // 关键配置：让预渲染等待所有服务端初始化任务完成
      waitUntil: 'hydrate',
      // 如果爬虫耗时较长，可调整超时时间（单位：毫秒）
      timeout: 60000
    }
  }
})

waitUntil: 'hydrate'会强制Nuxt等待所有服务端异步初始化逻辑（包括你的爬虫任务）执行完毕后，再开始生成静态页面。

3. 前端页面正确读取数据 #

在页面组件中通过异步方式读取db，确保拿到的是爬取完成的数据：

<!-- pages/index.vue -->
<script setup>
const db = useStorage('db')
// 异步获取数据，避免拿到初始空值
const scrapedItems = await db.getItem('scrapedItems')
</script>

<template>
  <div v-for="item in scrapedItems" :key="item">{{ item }}</div>
</template>

4. 踩坑提醒 #

• Playwright在generate环境下必须启用无头模式，否则会弹出浏览器窗口导致构建阻塞；
• 如果爬虫逻辑耗时久，一定要调大timeout参数，防止Nuxt强制终止未完成的任务；
• 测试时可在插件中添加console.log，观察generate过程中是否打印出爬取完成的日志，确认任务确实执行完毕。

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