此功能在 NuxtHub 的 免费和专业计划 中均可用,但在您 Cloudflare 帐户的 Workers 付费计划 中可用。
我们很高兴地推出 hubBrowser()
。此新方法允许您使用 Puppeteer 在您的 Nuxt 应用程序中直接运行无头浏览器。
如何使用 hubBrowser()
- 将
@nuxthub/core
更新到最新版本(v0.7.11
或更高版本)。 - 在您的
nuxt.config.ts
中启用hub.browser
。
nuxt.config.ts
export default defineNuxtConfig({
hub: {
browser: true
}
})
- 安装所需的依赖项
终端
npx nypm i @cloudflare/puppeteer puppeteer
- 在您的服务器路由中开始使用
hubBrowser()
server/api/screenshot.ts
export default eventHandler(async (event) => {
const { page } = await hubBrowser()
await page.setViewport({ width: 1920, height: 1080 })
await page.goto('https://cloudflare.com')
setHeader(event, 'content-type', 'image/jpeg')
return page.screenshot()
})
- 在部署之前,请确保您订阅了 Workers 付费计划
- 使用 NuxtHub 部署您的项目。