Je code donc je suis là.

0%

在 Github Pages 上部屬 VueJs 遇上的 404

Posted on Edited on In

最近重新以 Vue3 來建構自己的網站，雖然內容很簡單，也只有幾個頁面而已，但算是第一次從頭跑到尾。在以 VueJs 3 開發，並且部屬到 Github pages 上的過程中，才知道原來使用框架之後的部屬和以往傳統的部署，有很大的不同。原因是 VueJs 透過 Router 的設定，和 webpack 的編譯打包，有許多的細節設定要做，加上部屬到 Github pages 上，最上層的資料夾並不是路徑源頭，所以有時候出現問題會難找出原因(對我而言啦)。

部屬完成後，網頁跑得還蠻順的，每個連結也都很聽話的顯示，唯有在瀏覽器上頭的連結網址框裡按下 enter 鍵時，噹～噹～出現 404 ，也就是找不到這一頁，怎麼回事？

history & hash

中午和好友 K 通了話說了自己遇到的問題，她覺得是 Vue-Router 設定的問題，有了方向後上網找了一下資料，似乎是和 Vue-Router 裡的設定模式有關。Router 模式有兩種，一種是 HashRouter (hash mode)另一種是 BrowserRouter (history mode)，HashRouter 會在網址上加上#字號，大部分的網頁都會使用 BrowserRouter 因為網址會比較簡潔。以下是 K 提供的解釋：

  • HashRouter: 頁面路徑最前面會有個「#」，換 url 時不會發送 request。
  • BrowserRouter: 頁面路徑不會有井字，但換 url 時會發送 request。

簡單來說，由於#是用來判斷是否要發送 request 的工具，反言之如果要使用 BrowserRouter，server 必須要有對應的 response(最簡單的方法就是要請後端幫你設定好除了 api 以外的 request 都回傳你的 index.html)

複製哪一個版本？

雖然有了這個概念，但如何修正又是另外一回事，於是又再爬了一些文，解決方式大多是把 history mode 改成 hash mode，但我真的想要我的 url 出現#字號嗎？於是又不死心的找其他方法，甚至修改了路徑，但仍是徒勞。在找資料的同時，又發現許多前輩建議「複製」一份 index.html 然後改成 404.html ，讓出現 404 時導回 index.html(其實沒導回是偽裝)就可以解決，原本以為在 public 檔案夾裡「複製」，會自動解析到 dist 去，的確是會重新打包到 dist 資料夾，但是 build 後推到 Github pages 上，仍然是出現 404。肯定是自己還沒完全理解網上許多前輩建議「複製」一份 index.html 然後改成 404.html 就可以解決的真義，是不是複製的方式與來源有會有影響？最後我試著將「build 編譯過」的 index.html 內容複製一份到 404.html，然後，「問題就解決了！」。

原來是這樣啊！但這也會有問題吧？就是每次 index.html 有更動，我就必須再一次的 build 後再「複製」然後改成 404，如果忘記改不就糗大了？需要再想想有沒辦法用 sh 的腳本來解決。哈！

問題算是暫時解決了，但是還有修正的空間，先記錄這一段，下次找到解決方案再回來記錄。

後記

  • 世界變的比想像中還快，前端技術也是。如果說轉職前端工程師有什麼禮物，那麼一直學習或許就是一個禮物吧。
  • 後續網站要修正的地方還不少，除了動畫部分想用套件外，RWD 也有許多要優化的地方。因為現在的產品的是一直在進化的，所以也有相對應的 Méthode agile (敏捷軟體開發) ，人們在使用的 APP 永遠不可能是最終版，當然網站也是。
  • 有好友一起討論真的是很棒的事，謝謝 K 。

續集

這幾天調整了頁面的 RWD 後，再次將更新部分推到 github pages 上，仍然使用神奇的「一鍵部屬」，然後子頁面們又回到空白頁了，這次不像上次不離不棄的糾纏十幾個小時，懂得放下然後時不時回來看看，到了晚上決定再次砍掉重練，仍一樣。努力回想上次是如何修正的，終於知道大概修正的方式。

是看了這篇給了些靈感，也覺得一定是404.html的步驟有玄機，再次試著做一次，頁面出來了，應該就是正確步驟，所以來記錄一下。

複製 index 成 404 如何才正確？

如果執行npm run build webpack 會將public的檔案打包一份到dist去，所以直接在dist複製index.html成為404.html是沒用的，在下次build時，因public裡沒有404.html所以在dist裡的404.html也會被刪除。所以：

  • 先把dist裡的所有檔案清掉
  • 執行build一次讓dist檔案產生
  • 到dist裡複製一份index.html到public來並改名為404.html
  • 再執行一次build，或使用「一鍵部屬」的sh deploy.sh指令，當然deploy.sh要先準備好。
  • 等個幾分鐘到網頁上去確認。

參考：