uniapp開發(fā)移動端APP、小程序已經(jīng)非常流行。有時候我們需要通過uniapp打包生成H5/wap版本讓H5功能能同步APP小程序的功能，而不是重新寫一個端的功能模塊代碼。但是發(fā)現(xiàn)在開發(fā)H5版本中，我們的頁面訪問路徑都會帶上一個“#”號，例如：https://h5.shopwind.net/#/pages/index/index , 這個不僅影響美觀，還會在某些場合被過濾到“#”號導(dǎo)致路由錯誤，比如我們在做H5端的微信公眾號登錄的時候，返回地址帶有“#”號就會被自動過濾掉，導(dǎo)致無法回調(diào)到正確頁面，解決辦法如下：
一、使用Hbuilder 工具打開manifest.json 文件，定位到：H5配置->路由模式->選擇 history 模式
這時您會發(fā)現(xiàn)打開頁面后，已經(jīng)去掉了了“#”號，且能正常訪問，但是當(dāng)我們刷新頁面后，卻報了“404”錯誤， 我們睜大眼睛仔細(xì)檢查是不是網(wǎng)址錯了，發(fā)現(xiàn)網(wǎng)址并沒有錯?。?這就奇怪了！
不急，要解決上面這個問題，你需要了解下面的內(nèi)容：
1）hash ——即地址欄URL中的#符號。 hash 雖然出現(xiàn)URL中，但不會被包含在HTTP請求中，對后端完全沒有影響，因此改變hash不會重新加載頁面。
2）history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。需要特定瀏覽器支持 history模式，會出現(xiàn)404 的情況，需要后臺配置。
3）hash模式下，僅hash符號之前的內(nèi)容會被包含在請求中，如 https://www.shopwind.net, 因此對于后端來說，即使沒有做到對路由的全覆蓋，也不會返回404錯誤；
4）history模式下，前端的url必須和實際向后端發(fā)起請求的url 一致，如https://www.shopwind.net/a/ 。如果后端缺少對/a 的路由處理，將返回404錯誤
二、服務(wù)器配置
打包好H5代碼上傳到服務(wù)器還需要做偽靜態(tài)的配置。
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]
