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