linkedin 网站预览图片截图

【问题标题】：Generate facebook/ linkedin website preview image screenshot with Nuxt / VueJS使用 Nuxt/VueJS 生成 facebook/linkedin 网站预览图片截图
【发布时间】：2020-09-22 14:42:28
【问题描述】：

我们使用nuxt generate 生成了大约 5,000 个页面。其中许多在 Facebook 和 LinkedIn 上被大量分享。

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

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

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

【问题讨论】：

标签： vue.js nuxt.js server-side-rendering

【解决方案1】：

您可以编写一个启动 Nuxt 然后运行 Puppeteer to grab a screenshot 的 Node 脚本。

例如，可以使用node ./screenshot.js 8081 运行以下脚本。它可以修改为对所有 5000 个页面迭代运行。

// screenshot.js
const puppeteer = require('puppeteer');
const nuxt = require('@nuxt/cli');

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

  try {
    await nuxt.run(['generate'])
    await nuxt.run(['dev', '--port', port])
  } catch (error) {
    console.error(error)
    process.exit(2)
  }

  const browser = await puppeteer.launch()
  try {
    const page = await browser.newPage()
    await page.goto(`http://localhost:${port}`)
    await page.screenshot({ path: 'screenshot.png' })
  } finally {
    await browser.close()
  }

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

【讨论】：