nginx配置之部署后刷新產(chǎn)生404錯誤的解決
在這里記錄一下前端部署過程中，遇到的瀏覽器刷新出現(xiàn)的nginx_error問題。
將前端部署到服務(wù)器上之后，頁面之間可以相互跳轉(zhuǎn)，但是只要一點(diǎn)擊瀏覽器刷新頁面之后就會出現(xiàn)紅紅的大大的nginx_error。
一、配置nginx
在網(wǎng)上查找資料之后在nginx.conf上配置了try_files $uri $uri/ /index.html；這樣配置之后瀏覽器刷新之后如果沒找到目標(biāo)頁面就會重新定位到index.html頁面。
二、注意頁面之間的邏輯
雖然這樣配置了之后不會出現(xiàn)nginx_error，但是每次刷新都會回到登錄頁面。
原因是vite創(chuàng)造的vue項目默認(rèn)是單頁面的，同時我對于路徑IP：/重定位到了登錄頁面，所以每次都會重新回到登陸頁面。
如果想要去到其他頁面則需調(diào)整項目結(jié)構(gòu)，而且可能需要引入插件，調(diào)整完之后還要配置nginx。
如果想在不改變頁面結(jié)構(gòu)的情況下，實(shí)現(xiàn)瀏覽器刷新不出錯，就需要寫好不同頁面之間的邏輯。
我對項目比較簡單，所以只用注意登陸頁面的邏輯，如果會話存儲中token存在則直接定位到首頁，這樣就不會出現(xiàn)一刷新就回到登錄頁面的情況啦。
但是這里需要提醒一下：
不要用pinia來存儲token，可能是需要配置，歡迎大佬指導(dǎo)。
要用sessionStorage.setItem來存儲token，不然讀取不到token，導(dǎo)致一刷新就回到登錄頁面。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Nginx $remote_addr和$proxy_add_x_forwarded_for變量的實(shí)現(xiàn)
本文主要介紹了Nginx $remote_addr和$proxy_add_x_forwarded_for變量的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
這篇文章主要介紹了Nginx提高安全與性能的最好配置詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
本文主要介紹了Nginx啟動不了原因解決(端口占用)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
這篇文章主要介紹了nginx中root和alias指令的使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
負(fù)載均衡用于從“upstream”模塊定義的后端服務(wù)器列表中選取一臺服務(wù)器接受用戶的請求,下面這篇文章主要給大家介紹了關(guān)于使用nginx進(jìn)行負(fù)載均衡的搭建全過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Nginx進(jìn)行域名重寫和泛域名解析配置的方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
在生產(chǎn)環(huán)境中,需要隱藏Nginx的版本號,以避免泄漏Nginx的版本,使攻擊者不能針對特定版本進(jìn)行攻擊,下面就來介紹一下Nginx安全防護(hù)的方法,感興趣的可以了解一下2025-07-07
Nginx綁定多個域名，可通過把多個域名規(guī)則寫一個配置文件里實(shí)現(xiàn)，也可通過分別建立多個域名配置文件實(shí)現(xiàn)，為了管理方便，建議每個域名建一個文件，有些同類域名則可寫在一個總的配置文件里。下面這篇文章就來詳細(xì)看看nginx多域名配置的方法，有需要的朋友們可以參考。2016-12-12
本文基于一次生產(chǎn)環(huán)境中的實(shí)際案例,詳細(xì)解析了Nginx代理配置不當(dāng)導(dǎo)致HTTPS訪問下前端資源加載失敗的問題,通過日志分析、參數(shù)調(diào)優(yōu)和原理說明,為開發(fā)者提供完整的排查思路與解決方案,需要的朋友可以參考下2025-12-12
nginx不單可以作為強(qiáng)大的web服務(wù)器，也可以作為一個反向代理服務(wù)器，而且nginx還可以按照調(diào)度規(guī)則實(shí)現(xiàn)動態(tài)、靜態(tài)頁面的分離，可以按照輪詢、ip哈希、URL哈希、權(quán)重等多種方式對后端服務(wù)器做負(fù)載均衡，同時還支持后端服務(wù)器的健康檢查2016-09-09