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