PC端MPA和移動端SPA的路由同構

不少Web項目都能在端瀏覽器和PC端瀏覽器正常顯示，比較簡單的做法是利用響應式布局，通過媒體查詢等方式來使得代碼能夠在PC端和移動端自適應顯示。比如Bootstrap官網就屬於此類。

Bootstrap PC端

Bootstrap 移動端

但響應式布局只適合少數邏輯簡單，頁面較少的網站，對於大中型網站最優的方案還是將PC端項目和移動端項目進行分離，這樣既降低了代碼的耦合度，同時避免了移動端請求多餘的代碼。

問題描述

一日，突然被告知官網的一個頁面無法訪問，點擊一試能正常訪問。仔細一看消息是從微信發來的，很可能是移動端的問題。

於是在瀏覽器中使用模擬器訪問發現控制台報錯，同時http請求返回404。再查看源代碼，發現原來是URL地址不對，移動端並沒有以html結尾的路由。

但是這個URL是從哪裡來的？難道是老版本的URL？

PC端多頁應用路由

因為URL以html結尾，很自然地猜測這是PC端路由。

PC端官網是傳統的MPA項目，邏輯簡單，時間久遠。路由由Web伺服器nginx來負責處理，直接通過後綴來讀取對應的文件並返回。nginx配置文件類似這樣：

移動端單頁應用路由

而移動端是基於vue-cli搭建的SPA項目，在vue-router中配置的HTML5模式路由，沒有文件後綴。

當然路由能正常運作不但需要瀏覽器支持HTML5，同時nginx文件也要做對應修改。

同時由於移動端和PC端都是用的同一個域名，所以要對瀏覽器進行判斷，只有當設備是移動端時才返回對應頁面。完整的nginx配置文件示例如下：

簡而言之，默認由nginx伺服器來處理路由，展示PC端頁面，如果判斷為移動端請求，則返回移動端首頁，路由交給vue-router來進行處理。

兩個項目分別開發於不同時期，採用不同架構，不同的路由。

雖然兩個項目能穩定運行，互不干擾，但是各自的路由規則使得URL無法跨平台訪問。最佳的體驗應該是同一個URL在任何終端瀏覽器都可以正常訪問。要實現這一目的，先來看看各大網站的實現方式~

網站案例

路由同構

移動端和PC端同時都是多頁應用，這類項目一般上線時間比較長，同時有SEO需求。例如我們最常用的GitHub

以RxWX項目為例，URL地址同為https://github.com/yalishizhude/RxWX

頁面總體積為495KB

頁面總體積為77.8KB

PC端和移動端路由完全一致，但是根據瀏覽器所在不同終端而返回對應的頁面。體驗非常好，贊一個~

路由重定向

另一種處理方式還是做路由隔離，但是會對於不同的設備請求轉發到對應的正確路徑或域名。

比如很多網站的移動端域名就是在PC端域名上加前綴來做區分。

如果把PC端URL放入移動端瀏覽器打開，那麼會跳轉到移動端的域名。

但是如果想在PC端瀏覽器中打開移動端鏈接，很多網站的轉發就失效了。情況變得慘不忍睹了~

比如頁面出現類似「老年字體」的放大效果：

比如頁面樣式基本正確，但是無法使用的：

還有雖然頁面未轉發，但是頁面樣式和功能基本正常：

解決方法

那麼採用哪種方式來實現比較好呢？

結合以上的案例我們可以看出，路由同構的處理方式體驗上來說是比較好的，不需要等待頁面跳轉，也不會修改原有的URL。

而路由重定向的方式在各大網站上或多或少的存在問題（尚不知是技術原因還是業務上忽視了），而且路由雙向的跳轉規則處理起來會略微麻煩一些。所以採用路由同構的方式。那到底是改那一端的路由比較好呢？

調整PC端路由

首先考慮修改PC端路由，改為無後綴的方式，與移動端一致。可以考慮在任一處進行修改。

nginx服務端。沒有想到通用的匹配規則，只能每個頁面單獨配置，同時每個配置項還需要判斷終端類型，可維護性差。

前端頁面。需要重新編寫腳本進行路由判斷，增加代碼量。

所以考慮第二種方式。

調整移動端路由

移動端路由非常好修改，直接在vue-router的配置文件中將路由路徑修改成與PC端一致即可。類似下面這樣：

其他會涉及到路由跳轉的地方都可能需要修改，包括router-link組件和$router實例。之所以說「可能」是因為我們在修改路由配置時只修改了path，name並沒有修改，所以如果在跳轉的時候使用的是path那麼必須修改，如果使用的是name則不需要。所以在寫代碼的時候盡量還是使用name。

部署到生產環境測試，發現同一個路由已經能根據終端類型自動響應了，但是工作真的就完成了嗎？

如果在執行npm run dev進入開發模式時，服務端會返回404。因為vue-cli的webpack模板項目，開發時實際上是在本地啟動了一個基於Express.js的web伺服器，由它來負責相應瀏覽器請求，面對後綴為html的請求，當然會查找本地對應的文件而不是轉發到index.html。所以需要對其進行修改。

找到第55行，利用已經使用的模塊，傳入重載參數，將以結尾的請求都轉發到根路徑。

至此，開發環境的404問題解決。

最後

雖然因為公司項目源碼不能開放，但是網站還是可供訪問的：梯度科技

本文可被轉發或分享，但必須保留完整圖文信息和出處，作者保留追究一切法律責任的權利和手段~

搜索關注公眾號「web學習社」~

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！