用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

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

例如，以下脚本可以是运行和 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)
})()

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

Generate facebook/ linkedin website preview image screenshot with Nuxt / VueJS

vue.js

server-side-rendering

nuxt.js