首頁 >web前端 >uni-app >Uniapp發佈為H5版本時如何隱藏存取路徑的#符號

Uniapp發佈為H5版本時如何隱藏存取路徑的#符號

似水流年ヾ ^_^
似水流年ヾ ^_^原創
2021-07-21 12:46:354791瀏覽

uniapp開發行動裝置APP、小程式已經非常流行。有時候我們需要透過uniapp打包產生H5/wap版本讓H5功能能同步APP小程式的功能,而不是重新寫一個端的功能模組程式碼。

但發現在開發H5版本中,我們的頁面存取路徑都會帶著一個「#」號,例如:https://h5.shopwind.net/#/pages/index/index , 這個不僅影響美觀,也會在某些場合被過濾到「#」號導致路由錯誤,例如我們在做H5端的微信公眾號登錄的時候,返回地址帶有「#」號就會被自動過濾掉,導致無法回調到正確頁面,解決方法如下:

一、使用Hbuilder 工具開啟manifest.json 文件,定位到:H5配置->路由模式->選擇history 模式

Uniapp發佈為H5版本時如何隱藏存取路徑的#符號

這時您會發現打開頁面後,已經去掉了“#”號,且能正常訪問,但是當我們刷新頁面後,卻報了“404”錯誤, 我們睜大眼睛仔細檢查是不是網址錯了,發現網址並沒有錯! !這就奇怪了!
不急,要解決上面這個問題,你需要了解下面的內容:
1)hash ——也就是網址列URL中的#符號。 hash 雖然出現URL中,但不會被包含在HTTP請求中,對後端完全沒有影響,因此改變hash不會重新載入頁面。
2)history -利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。需要特定瀏覽器支援 history模式,會出現404 的情況,需要後台配置。
3)hash模式下,僅hash符號之前的內容會被包含在請求中,如 https://www.shopwind.net, 因此對於後端來說,即使沒有做到對路由的全覆蓋,也不會回傳404錯誤;
4)history模式下,前端的url必須和實際向後端發起請求的url 一致,如https://www.shopwind.net/a/ 。如果後端缺少對/a 的路由處理,將回傳404錯誤

二、伺服器設定

打包好H5程式碼上傳到伺服器還需要做偽靜態的配置。

history模式下設定nginx

location / {
  try_files $uri $uri/ /index.html;
}

history模式下設定Apache

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

H5案例參考:https://h5.shopwind.net
uniapp開發交流

#

以上是Uniapp發佈為H5版本時如何隱藏存取路徑的#符號的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn