如何在 Vue JS SPA 中打开图形图像?

Roc*_*coB 6 facebook-opengraph vue.js vuejs2 nuxt.js

我正在尝试在我的 VueJS 单页应用程序中包含一个开放图形图像。

https://developers.facebook.com/tools/debug/

给我这个链接预览:

facebook 开放图上的链接预览

我想如果我希望所有路由都返回相同的图像,我可以在页面顶部插入开放图形元标记,但我希望不同的页面显示不同的图像。

我试过https://github.com/declandewet/vue-metahttps://github.com/ktquez/vue-head,但那些似乎没有帮助,大概是因为它们通过 JS 注入元标记页面加载后。

除了使用 Nuxt 或 Vue SSR 进行预渲染之外,还有其他方法吗?

小智 3

prerender-spa-plugin与 vue-head/vue-meta 结合使用应该可以满足您的需求!只要您提前知道所有路线,它就会呈现您可以为机器人提供的 index.html 文件。

如果您有动态内容,您将不得不使用异步内容captureAfterDocumentEventcaptureAfterTime为了捕获已呈现的内容。

如果您需要更强大的东西,Vuejs SSR可能是更好的选择。

  • 我事先并不知道我的路线。我在 firebase 上,并且能够通过在我的托管前面粘贴一个云函数并渲染出直接链接的开放图来实现此工作。对于任何感兴趣的人,您可以查看我对此的回复 https://github.com/firebase/firebase-tools/issues/33。在页面上搜索 TheRoccoB。 (6认同)