vue項目history模式刷新404問題解決辦法
前言
vue項目history模式部署到服務(wù)器后 ，根路徑訪問沒有問題，但是進(jìn)入其他功能再刷新頁面就會出現(xiàn)404，因為你沒在nginx或者apache配置上面加上重定向跳轉(zhuǎn)。
解決辦法，只需要加上這段配置：
nginx配置內(nèi)容：
location / {
try_files $uri $uri/ @router;
index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}apache配置內(nèi)容：
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ ./index.html [L]
這句配置的意思是每次匹配url路徑時候找不到對應(yīng)靜態(tài)資源時候調(diào)制跳轉(zhuǎn)到index.html文件
解析為什么會這樣（針對路由在history模式下）：
因為vue項目中路由hash模式改為了history模式，由于hash模式時url帶的#號后面是哈希值不會作為url的一部分發(fā)送給服務(wù)器，而history模式下當(dāng)刷新頁面之后瀏覽器會直接去請求服務(wù)器，而服務(wù)器沒有這個路由，于是就出現(xiàn)404。
因為我們的應(yīng)用是單頁客戶端應(yīng)用，當(dāng)使用 history 模式時，URL 就像正常的 url，可以直接訪問http://www.xxx.com/user/id，但是因為vue-router設(shè)置的路徑不是真實存在的路徑，所以刷新就會返回404錯誤。
想要history模式正常訪問，還需要后臺配置支持。要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。
也就是在服務(wù)端修改404錯誤頁面的配置路徑，讓其指向到index.html。
總結(jié)
到此這篇關(guān)于vue項目history模式刷新404問題解決辦法的文章就介紹到這了,更多相關(guān)vue history模式刷新404內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項目通過a標(biāo)簽下載圖片至zip包的示例代碼
在vue項目中,將圖片下載可使用流的形式,下載成單個圖片,或者將多個圖片下載至zip包,本文就是介紹使用a標(biāo)簽下載圖片的用法,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-10-10
Vue中Pinia狀態(tài)管理的四大實戰(zhàn)場景指南
Pinia 是 Vue 官方推薦的狀態(tài)管理庫,這篇文章主要為大家詳細(xì)介紹了Vue中Pinia狀態(tài)管理的四大實戰(zhàn)場景,感興趣的小伙伴可以了解一下2025-10-10
這篇文章主要介紹了詳解Vue 如何監(jiān)聽Array的變化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
最近在調(diào)研一些在線文檔的實現(xiàn),包括文檔編輯器、在線思維導(dǎo)圖、在線流程圖等,本文分享在Vue框架下基于metaeditor-mxgraph實現(xiàn)在線流程圖,感興趣的朋友一起看看吧2024-07-07
本文作者分享了使用Vue進(jìn)行代理配置的個人經(jīng)驗,介紹了如何使用proxyTable進(jìn)行跨域請求配置,并提供了具體的配置文件和使用方法,便于同行參考和學(xué)習(xí)2024-10-10
這篇文章主要介紹了Vue頁面路由參數(shù)的傳遞和獲取方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2026-03-03
這篇文章主要介紹了解決Vue前后端跨域問題的多種方式,本文主要介紹借助解決Vue前后端跨域問題的幾種方式，將會使用axios進(jìn)行請求需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue數(shù)據(jù)回顯表單無法編輯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章主要介紹了Vue組件間數(shù)據(jù)傳遞的方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了vue實現(xiàn)的仿淘寶購物車功能,結(jié)合完整實例形式較為詳細(xì)的分析了vue.js仿淘寶購物車功能的具體樣式、功能相關(guān)實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2019-01-01