寶塔nginx部署前端頁(yè)面刷新報(bào)404錯(cuò)誤解決辦法
問(wèn)題：
當(dāng)我們使用腳手架打包前端項(xiàng)目的時(shí)候，如果前端項(xiàng)目并沒(méi)有靜態(tài)化的配置，如以下
當(dāng)我們刷新頁(yè)面，或進(jìn)行路由配置訪問(wèn)的時(shí)候就會(huì)報(bào)404的錯(cuò)誤
原因：
這是因?yàn)橥ǔＮ覀冏龅膙ue項(xiàng)目屬于單頁(yè)面開(kāi)發(fā)。所以只有index.html。解決這個(gè)bug也很簡(jiǎn)單。只需要將訪問(wèn)重定向到index.html這個(gè)頁(yè)面，交由 index.html 去處理對(duì)應(yīng)的路由跳轉(zhuǎn)就好。
解決辦法：修改nginx配置
server {
listen 80; # 監(jiān)聽(tīng)的端口
server_name xx.xx.xxx.xx; # 處理的host地址 （請(qǐng)?zhí)鎿Q成你對(duì)應(yīng)的項(xiàng)目訪問(wèn) ip 或 域名）!!!
root /usr/share/nginx/html; # vue項(xiàng)目存在的目錄（替換成你對(duì)應(yīng)的地址，如果你這是用docker部署的請(qǐng)改成你容器內(nèi)的地址）
# 下面兩個(gè)配置是關(guān)鍵所在！?。。。。?
location / {
try_files $uri $uri/ @router;#需要指向下面的@router否則會(huì)出現(xiàn)vue的路由在nginx中刷新出現(xiàn)404
index index.html index.htm;
}
#對(duì)應(yīng)上面的@router，主要原因是路由的路徑資源并不是一個(gè)真實(shí)的路徑，所以無(wú)法找到具體的文件
#因此需要rewrite到index.html中，然后交給路由在處理請(qǐng)求資源
location @router {
rewrite ^.*$ /index.html last;
}
}
將nginx配置好后，重新打開(kāi)你的網(wǎng)頁(yè)，就發(fā)現(xiàn)可以進(jìn)行路由跳轉(zhuǎn)了！?。?/p>
總結(jié)
到此這篇關(guān)于寶塔nginx部署前端頁(yè)面刷新報(bào)404錯(cuò)誤解決辦法的文章就介紹到這了,更多相關(guān)寶塔nginx部署前端刷新404內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Nginx實(shí)現(xiàn)404頁(yè)面的配置方法的兩種方法
- Nginx出現(xiàn)404 Not Found nginx/1.23.4的完美解決方案
- Nginx代理接口訪問(wèn)返回404的實(shí)現(xiàn)示例
- nginx反向代理配置400,404,502等狀態(tài)的自定義頁(yè)面問(wèn)題
- nginx配置proxy_pass代理轉(zhuǎn)發(fā)時(shí)報(bào)404問(wèn)題
- Nginx實(shí)現(xiàn)404錯(cuò)誤自動(dòng)跳轉(zhuǎn)到首頁(yè)的配置過(guò)程
- nginx配置https://localhost/index報(bào)404
相關(guān)文章
解決nginx訪問(wèn)頁(yè)面中文亂碼的問(wèn)題
這篇文章主要為大家介紹了nginx訪問(wèn)頁(yè)面中文亂碼解決方案,文中有相關(guān)的代碼示例供大家參考,有需要的朋友可以借鑒參考下,希望能夠有所幫助2023-09-09
Nginx中mime.types配置文件類(lèi)型響應(yīng)的實(shí)現(xiàn)步驟
本文主要介紹了Nginx中mime.types配置文件類(lèi)型響應(yīng)的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2026-03-03
Nginx實(shí)現(xiàn)負(fù)載均衡的方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Nginx實(shí)現(xiàn)負(fù)載均衡的一些方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Nginx具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Nginx進(jìn)階配置實(shí)現(xiàn)SSL證書(shū)部署與資源防盜鏈實(shí)操
本文主要介紹了在Web服務(wù)運(yùn)維中使用Nginx進(jìn)行SSL證書(shū)部署,實(shí)現(xiàn)HTTPS加密訪問(wèn),強(qiáng)制HTTP轉(zhuǎn)HTTPS以及配置Nginx防盜鏈保護(hù)靜態(tài)資源安全的具體方法,感興趣的可以了解一下2026-04-04
這篇文章主要介紹了在nginx中設(shè)置三級(jí)域名的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
Nginx接收Http協(xié)議請(qǐng)求轉(zhuǎn)發(fā)使用Https協(xié)議的問(wèn)題
這篇文章主要介紹了Nginx接收Http協(xié)議請(qǐng)求轉(zhuǎn)發(fā)使用Https協(xié)議,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
Nginx啟動(dòng)顯示80端口占用問(wèn)題的解決方案
這篇文章主要介紹了Nginx啟動(dòng)顯示80端口占用問(wèn)題的解決方案,文中通過(guò)代碼示例和圖文講解的非常詳細(xì),對(duì)大家解決問(wèn)題有一定的幫助,需要的朋友可以參考下2024-04-04
NGINX報(bào)錯(cuò)413 Request Entity Too Large的問(wèn)題解決
Nginx 413錯(cuò)誤表示請(qǐng)求實(shí)體太大,本文主要介紹了NGINX報(bào)錯(cuò)413 Request Entity Too Large的問(wèn)題解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
目錄遍歷攻擊是一種常見(jiàn)的Web安全漏洞,本文主要介紹了Nginx防止目錄遍歷的方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12
nginx中proxy_set_header參數(shù)的實(shí)現(xiàn)
本文詳細(xì)介紹了Nginx中proxy_set_header指令的用法,通過(guò)設(shè)置不同的請(qǐng)求頭信息,可以實(shí)現(xiàn)更靈活的反向代理功能,具有一定的參考價(jià)值,感興趣的可以了解一下2024-12-12