寶塔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)了！??！
總結(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)動(dòng)態(tài)接口報(bào)錯(cuò)404Not Found問(wèn)題解決
本文主要介紹了nginx訪問(wèn)動(dòng)態(tài)接口報(bào)錯(cuò)404Not Found問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
linux設(shè)置Nginx自動(dòng)重啟的實(shí)現(xiàn)
在Linux系統(tǒng)中,設(shè)置Nginx服務(wù)開(kāi)機(jī)自動(dòng)啟動(dòng)及意外停止后自動(dòng)重啟是保持服務(wù)穩(wěn)定運(yùn)行的關(guān)鍵步驟,本文詳細(xì)介紹了如何使用systemctl命令和配置systemd服務(wù)文件來(lái)實(shí)現(xiàn)這一功能,感興趣的可以了解一下2024-09-09
Nginx HTTP Status 400 – 錯(cuò)誤的請(qǐng)求問(wèn)題解決
本文主要介紹了在配置Nginx反向代理兩個(gè)Tomcat站點(diǎn)時(shí)遇到HTTPStatus400錯(cuò)誤,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
網(wǎng)頁(yè)502?Bad?Gateway?nginx/1.20.1報(bào)錯(cuò)的原因與解決方法
502 bad gateway nginx/1.20.1 是一個(gè)錯(cuò)誤提示,通常出現(xiàn)在訪問(wèn)網(wǎng)站時(shí)出現(xiàn)問(wèn)題,這篇文章主要給大家介紹了關(guān)于網(wǎng)頁(yè)502?Bad?Gateway?nginx/1.20.1報(bào)錯(cuò)的原因與解決方法,需要的朋友可以參考下2024-03-03
Crontab+Shell做Nginx日志切割腳本實(shí)例代碼
本篇文章主要介紹了Crontab+Shell做Nginx日志切割腳本實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
nginx 內(nèi)置變量詳解及隔離進(jìn)行簡(jiǎn)單的攔截
這篇文章主要介紹了nginx 隔離進(jìn)行簡(jiǎn)單的攔截詳解的相關(guān)資料,這里對(duì)nginx內(nèi)置變量進(jìn)行了簡(jiǎn)單的介紹并對(duì)隔離攔截進(jìn)行了詳解， 需要的朋友可以參考下2016-12-12
Keepalived是一種實(shí)現(xiàn)高可用的軟件,基于VRRP協(xié)議,可以自動(dòng)將虛擬IP地址切換到備用服務(wù)器,具有一定的參考價(jià)值,感興趣的可以了解一下2024-12-12
Nginx+Tomcat負(fù)載均衡及動(dòng)靜分離群集的實(shí)現(xiàn)
本文主要介紹了Nginx+Tomcat負(fù)載均衡及動(dòng)靜分離群集的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
本篇文章主要介紹了用Nginx反向代理Node.js的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
zabbix配置nginx監(jiān)控的實(shí)現(xiàn)
本文主要介紹了zabbix配置nginx監(jiān)控的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05