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

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

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

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

這時您會發現打開頁面後，已經去掉了“#”號，且能正常訪問，但是當我們刷新頁面後，卻報了“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中文網其他相關文章！