單頁式應用(SPA,Single Page App)在Github遇到的問題集合

-

1. 按F5刷新頁面後變成github的404頁面

2. 想要用自己的網域

3. 時不時遇到找不到js,css或圖檔的狀況

以下分別對上述問題紀錄解法

  1. 如果你電腦作業系統是windows，直接拷貝index.html成404.html
    如果你電腦作業系統是linux，下指令製作404.html的軟連結，再加入git就不用每次更新index.html都拷貝一遍

    ln -s index.html 404.html

  2. 去DNS設定新的子網域名稱，再回到github設定pages

    情境舉例:
    我想設定的網域名稱為 cmmp.mirochiu.page，我的DNS提供商是cloudflare

    登入cloudflare系統，在左邊選單DNS中，按新增紀錄，再按儲存

    類型:CNAME 名稱:cmmp 內容:mirochiu.github.io Proxy狀態:僅DNS

    到github專案下的settings分頁，其中的pages選單
    (我的專案名稱是ClientMultimediaProcessing，pages選單的網址則是這樣  )

    選好要部署的branch，這樣就會觸發github Action幫你部屬網頁，依照你的網頁大小會有長短不一的等待時間(約3-10分鐘)

    然後在Custom domain小節 將網域名稱填上去按Save，就完成了自訂網域

  3. 是因為SPA的使用子路徑時所造成的問題

    情境舉例:
    我的SPA有個子選單manual，網址是 https://cmmp.mirochiu.page/manual

    我直接用網址進入這個子選單，瀏覽器會認為目前已經抵達manual目錄下，所以SPA網頁中用到資源，例如main.js, assets/main.js等這類的相對路徑，就會嘗試去抓取manual目錄下的main.js, manual/assets目錄下的main.js，因此導致使用者不時找不到js,css或圖檔的狀況。

    可透過改SPA內的連結成成完整URL，或是絕對路徑/main.js, /assets/main.js來修復這個問題。

    webpack 5可以透過指定 output.publicPath 成 '/' 來修復這個問題。

留言

張貼留言