使用Nuxt / VueJS生成facebook / linkedin网站预览图像截图

Question

我们正在使用nuxt generate生成约5,000页。其中许多已在Facebook和LinkedIn上大量共享。

预先生成这5,000个页面的预览屏幕截图的最佳方法是什么？是否有一个脚本或NPM软件包？

本质上，它应该预先生成屏幕截图填充（nuxt.config.js）：

{ property: 'og:image', content: 'https://example.com/social/page-4999-screenshot.png' }

Answer 1

例如，以下脚本可以与node ./screenshot.js 8081一起运行。可以将其修改为在启动之前迭代运行nuxt generate。

// screenshot.js
const puppeteer = require('puppeteer')

async function launchNuxt(port) {
  return require('@nuxt/cli').run(['dev', '--port', port])
  .catch((error) => {
    require('consola').fatal(error)
    process.exit(2)
  })
}

(async () => {
  const port = process.argv[3]

  await launchNuxt(port)

  const browser = await puppeteer.launch()
  try {
    console.log(`opening http://localhost:${port}`)
    const page = await browser.newPage()
    await page.goto(`http://localhost:${port}`)

    const path = 'screenshot.png'
    console.log(`saving screenshot to ${path}`)
    await page.screenshot({ path })
  } finally {
    await browser.close()
  }

  // force exit as Nuxt server is still listening...
  process.exit(0)
})()