寶塔nginx部署前端頁面刷新報(bào)404錯(cuò)誤解決辦法
更新時(shí)間：2024年03月30日 09:01:11 作者：月亮被咬碎成星星
使用nginx部署前端項(xiàng)目是一篇非常詳細(xì)的教程,旨在幫助初學(xué)者使用Nginx來部署前端項(xiàng)目,這篇文章主要給大家介紹了關(guān)于寶塔nginx部署前端頁面刷新報(bào)404錯(cuò)誤的解決辦法,需要的朋友可以參考下
問題：
當(dāng)我們使用腳手架打包前端項(xiàng)目的時(shí)候，如果前端項(xiàng)目并沒有靜態(tài)化的配置，如以下
當(dāng)我們刷新頁面，或進(jìn)行路由配置訪問的時(shí)候就會報(bào)404的錯(cuò)誤
原因：
這是因?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錯(cuò)誤解決辦法的文章就介紹到這了,更多相關(guān)寶塔nginx部署前端刷新404內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了nginx訪問頁面中文亂碼解決方案,文中有相關(guān)的代碼示例供大家參考,有需要的朋友可以借鑒參考下,希望能夠有所幫助2023-09-09
Nginx中mime.types配置文件類型響應(yīng)的實(shí)現(xiàn)步驟
本文主要介紹了Nginx中mime.types配置文件類型響應(yīng)的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2026-03-03
Nginx實(shí)現(xiàn)負(fù)載均衡的方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Nginx實(shí)現(xiàn)負(fù)載均衡的一些方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Nginx具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Nginx進(jìn)階配置實(shí)現(xiàn)SSL證書部署與資源防盜鏈實(shí)操
本文主要介紹了在Web服務(wù)運(yùn)維中使用Nginx進(jìn)行SSL證書部署,實(shí)現(xiàn)HTTPS加密訪問,強(qiáng)制HTTP轉(zhuǎn)HTTPS以及配置Nginx防盜鏈保護(hù)靜態(tài)資源安全的具體方法,感興趣的可以了解一下2026-04-04
這篇文章主要介紹了在nginx中設(shè)置三級域名的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
Nginx接收Http協(xié)議請求轉(zhuǎn)發(fā)使用Https協(xié)議的問題
這篇文章主要介紹了Nginx接收Http協(xié)議請求轉(zhuǎn)發(fā)使用Https協(xié)議,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Nginx啟動顯示80端口占用問題的解決方案,文中通過代碼示例和圖文講解的非常詳細(xì),對大家解決問題有一定的幫助,需要的朋友可以參考下2024-04-04
NGINX報(bào)錯(cuò)413 Request Entity Too Large的問題解決
Nginx 413錯(cuò)誤表示請求實(shí)體太大,本文主要介紹了NGINX報(bào)錯(cuò)413 Request Entity Too Large的問題解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
目錄遍歷攻擊是一種常見的Web安全漏洞,本文主要介紹了Nginx防止目錄遍歷的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12
nginx中proxy_set_header參數(shù)的實(shí)現(xiàn)
本文詳細(xì)介紹了Nginx中proxy_set_header指令的用法,通過設(shè)置不同的請求頭信息,可以實(shí)現(xiàn)更靈活的反向代理功能,具有一定的參考價(jià)值,感興趣的可以了解一下2024-12-12