寶塔nginx部署前端頁面刷新報(bào)404錯誤解決辦法
問題：
當(dāng)我們使用腳手架打包前端項(xiàng)目的時(shí)候，如果前端項(xiàng)目并沒有靜態(tài)化的配置，如以下
當(dāng)我們刷新頁面，或進(jìn)行路由配置訪問的時(shí)候就會報(bào)404的錯誤
原因：
這是因?yàn)橥ǔＮ覀冏龅膙ue項(xiàng)目屬于單頁面開發(fā)。所以只有index.html。解決這個(gè)bug也很簡單。只需要將訪問重定向到index.html這個(gè)頁面，交由 index.html 去處理對應(yīng)的路由跳轉(zhuǎn)就好。
解決辦法：修改nginx配置
server {
listen 80; # 監(jiān)聽的端口
server_name xx.xx.xxx.xx; # 處理的host地址 （請?zhí)鎿Q成你對應(yīng)的項(xiàng)目訪問 ip 或 域名）!!!
root /usr/share/nginx/html; # vue項(xiàng)目存在的目錄（替換成你對應(yīng)的地址，如果你這是用docker部署的請改成你容器內(nèi)的地址）
# 下面兩個(gè)配置是關(guān)鍵所在?。。。。?！
location / {
try_files $uri $uri/ @router;#需要指向下面的@router否則會出現(xiàn)vue的路由在nginx中刷新出現(xiàn)404
index index.html index.htm;
}
#對應(yīng)上面的@router，主要原因是路由的路徑資源并不是一個(gè)真實(shí)的路徑，所以無法找到具體的文件
#因此需要rewrite到index.html中，然后交給路由在處理請求資源
location @router {
rewrite ^.*$ /index.html last;
}
}
將nginx配置好后，重新打開你的網(wǎng)頁，就發(fā)現(xiàn)可以進(jìn)行路由跳轉(zhuǎn)了?。。?/p>
總結(jié)
到此這篇關(guān)于寶塔nginx部署前端頁面刷新報(bào)404錯誤解決辦法的文章就介紹到這了,更多相關(guān)寶塔nginx部署前端刷新404內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
nginx訪問動態(tài)接口報(bào)錯404Not Found問題解決
本文主要介紹了nginx訪問動態(tài)接口報(bào)錯404Not Found問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
linux設(shè)置Nginx自動重啟的實(shí)現(xiàn)
在Linux系統(tǒng)中,設(shè)置Nginx服務(wù)開機(jī)自動啟動及意外停止后自動重啟是保持服務(wù)穩(wěn)定運(yùn)行的關(guān)鍵步驟,本文詳細(xì)介紹了如何使用systemctl命令和配置systemd服務(wù)文件來實(shí)現(xiàn)這一功能,感興趣的可以了解一下2024-09-09
Nginx HTTP Status 400 – 錯誤的請求問題解決
本文主要介紹了在配置Nginx反向代理兩個(gè)Tomcat站點(diǎn)時(shí)遇到HTTPStatus400錯誤,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
網(wǎng)頁502?Bad?Gateway?nginx/1.20.1報(bào)錯的原因與解決方法
502 bad gateway nginx/1.20.1 是一個(gè)錯誤提示,通常出現(xiàn)在訪問網(wǎng)站時(shí)出現(xiàn)問題,這篇文章主要給大家介紹了關(guān)于網(wǎng)頁502?Bad?Gateway?nginx/1.20.1報(bào)錯的原因與解決方法,需要的朋友可以參考下2024-03-03
Crontab+Shell做Nginx日志切割腳本實(shí)例代碼
本篇文章主要介紹了Crontab+Shell做Nginx日志切割腳本實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
nginx 內(nèi)置變量詳解及隔離進(jìn)行簡單的攔截
這篇文章主要介紹了nginx 隔離進(jìn)行簡單的攔截詳解的相關(guān)資料,這里對nginx內(nèi)置變量進(jìn)行了簡單的介紹并對隔離攔截進(jìn)行了詳解， 需要的朋友可以參考下2016-12-12
Keepalived是一種實(shí)現(xiàn)高可用的軟件,基于VRRP協(xié)議,可以自動將虛擬IP地址切換到備用服務(wù)器,具有一定的參考價(jià)值,感興趣的可以了解一下2024-12-12
Nginx+Tomcat負(fù)載均衡及動靜分離群集的實(shí)現(xiàn)
本文主要介紹了Nginx+Tomcat負(fù)載均衡及動靜分離群集的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
本篇文章主要介紹了用Nginx反向代理Node.js的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
zabbix配置nginx監(jiān)控的實(shí)現(xiàn)
本文主要介紹了zabbix配置nginx監(jiān)控的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05