Vue 2 CLI 使用 Prerender 預渲染解決 SEO 問題

Vue 本身的特性是 SPA (Single Page Application)，所有的頁面都只有經由入口點 index.html 使用 JavaScript 進行動態渲染，所以當搜尋引擎機器人爬內容及社群網站上分享連結時顯示不出內容，導致影響 SEO，如果要解決這種問題除了使用 SSR (Server Side Rendering) 之外，也可以使用預先渲染的方式，當你的專案不大且頁面內容異動不大時就可以採用預先渲染的方式來解決這個問題

今天簡單紀錄一下 Vue CLI 導入 Prerender-SPA-Plugin 的過程跟遇到的小問題

導入很簡單，就使用別人做好的輪子即可（太懶了吧….

$ vue add prerender-spa

照著提示訊息回答功能選項，基本上都是 Yes 即可，然後輸入需要渲染的頁面路由即可，提醒只能路由模式只能使用 History ，否則無法使用 完成之後就可以 npm run build 看看 dist 中有沒有產生相對的路由頁面，簡簡單單就打完收工

小問題

當你的頁面如果需要 Loading 比較久的時候，你可能會發現..奇怪為甚麼渲染出來的東西少了點東西，比如說有使用 Vue-Meta 時，發現渲染完後少了 Meta Tag，後來發現需要在 main.js 入口點中的 mounted 加入個延時才能正常渲染

mounted() {
    setTimeout(() => {
      document.dispatchEvent(new Event("x-app-rendered"));
    }, 5000);
  },