Vue JS SPA에서 열린 그래프 이미지를 수행하는 방법?

Question

VueJS 단일 페이지 응용 프로그램에 열린 그래프 이미지를 포함하려고합니다.

내가 모든 경로가 동일하게 반환 할 경우 내가 페이지 상단에 오픈 그래프 메타 태그를 잼 단지 수 있다고 생각 :

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

나에게이 링크 미리보기를 산출 이미지,하지만 다른 페이지를 다른 이미지를 표시하고 싶습니다.

나는 https://github.com/declandewet/vue-meta과 https://github.com/ktquez/vue-head을 시도했지만, 페이지가로드 된 후 JS를 통해 메타 태그를 삽입하기 때문에 도움이되지 않는 것 같습니다.

Nuxt 또는 Vue SSR로 사전 렌더링하는 것 외에 다른 방법이 있습니까?

Answer 1

prerender-spa-plugin과 함께 사용하면 vue-head/vue-meta와 (과)의 트릭을해야합니다! 모든 경로를 미리 알고있는 한 봇에 제공 할 수있는 index.html 파일이 렌더링됩니다.

동적 콘텐츠가있는 경우 비동기 콘텐츠를 캡처하기 위해 captureAfterDocumentEvent 또는 captureAfterTime을 사용해야합니다.

더욱 견고한 것이 필요한 경우 Vuejs SSR이 더 좋은 옵션 일 수 있습니다.