❶ [prerender-spa-plugin]--微型Vue項目的SEO利器
使用prerender-spa-plugin之前，我們構建的網站是一個純正的Vue CLI項目，採用webpack打包，並使用vue-router進行路由管理。由於目標瀏覽器不包括老版本IE和移動端瀏覽器，我們選擇了hash模式的路由配置。在頁面開發上，我們傾向於將單個頁面分離為多個組件，以提高開發效率和後期維護性。
經過開發和上線，我們的網站運行正常，但老大提出了一些關於SEO和用戶體驗的建議，希望我們能夠改用靜態頁。這讓我們陷入了思考，最終決定嘗試prerender-spa-plugin這個插件來優化我們的SPA。
prerender-spa-plugin是一個允許webpack預渲染單頁應用（SPA）的插件，幫助生成靜態頁面，以提升SEO表現和用戶體驗。我們首先將路由模式從hash模式調整為history模式，以便順利進行預渲染。接著，通過修改vue.config.js文件，使用webpack-merge插件配置了預渲染功能，將相關的頁面預先載入和渲染成靜態頁面，並以獨立文件夾的形式保存。
在沒有使用prerender之前，網站的文件結構如下：只有一個index.html作為入口文件，動態渲染各個頁面。而採用prerender之後，我們的文件結構發生了變化，多了一個關於文件夾，裡麵包含了一個index.html文件，對應'/about'頁面的靜態頁，使得通過URL訪問時可以直接訪問到靜態頁面，而不需要讓瀏覽器進行動態渲染。這樣搜索引擎可以爬取到頁面的所有內容，而不是單頁應用的啟動頁。
在完成prerender的配置後，我們在根目錄的index.html文件中也實現了靜態化處理，完成了官網頁面的靜態化改造。使用prerender-spa-plugin的核心人員也是Vue的核心成員，因此在Vue項目中使用起來非常順暢。但對於大型項目，可能還需要考慮更全面的解決方案，如伺服器端渲染（SSR）。
在完成項目重構後，我們遇到了一個「蝴蝶效應」問題。一些公司介紹被網路收錄的鏈接是舊的靜態頁鏈接，導致訪問後頁面不存在。為了解決這個問題，我們使用了nginx的重定向功能，將舊鏈接永久重定向至目標URL，避免了創建額外的「跳板」頁面，從而提高了SEO表現。
總的來說，通過使用prerender-spa-plugin，我們可以便捷地優化SPA的SEO性能和用戶體驗，無需進行傷筋動骨的重構。這種方案適用於對SEO需求不強的項目，但在實際應用中，可能還需要考慮其他因素，如項目規模、團隊資源和長期維護等問題。在未來，我們計劃探索更多的解決方案，如gitlab的自動部署，以應對可能遇到的挑戰和優化流程。