nginx配置之部署后刷新產(chǎn)生404錯(cuò)誤的解決
在這里記錄一下前端部署過程中，遇到的瀏覽器刷新出現(xiàn)的nginx_error問題。
將前端部署到服務(wù)器上之后，頁面之間可以相互跳轉(zhuǎn)，但是只要一點(diǎn)擊瀏覽器刷新頁面之后就會(huì)出現(xiàn)紅紅的大大的nginx_error。
一、配置nginx
在網(wǎng)上查找資料之后在nginx.conf上配置了try_files $uri $uri/ /index.html；這樣配置之后瀏覽器刷新之后如果沒找到目標(biāo)頁面就會(huì)重新定位到index.html頁面。
二、注意頁面之間的邏輯
雖然這樣配置了之后不會(huì)出現(xiàn)nginx_error，但是每次刷新都會(huì)回到登錄頁面。
原因是vite創(chuàng)造的vue項(xiàng)目默認(rèn)是單頁面的，同時(shí)我對(duì)于路徑IP：/重定位到了登錄頁面，所以每次都會(huì)重新回到登陸頁面。
如果想要去到其他頁面則需調(diào)整項(xiàng)目結(jié)構(gòu)，而且可能需要引入插件，調(diào)整完之后還要配置nginx。
如果想在不改變頁面結(jié)構(gòu)的情況下，實(shí)現(xiàn)瀏覽器刷新不出錯(cuò)，就需要寫好不同頁面之間的邏輯。
我對(duì)項(xiàng)目比較簡單，所以只用注意登陸頁面的邏輯，如果會(huì)話存儲(chǔ)中token存在則直接定位到首頁，這樣就不會(huì)出現(xiàn)一刷新就回到登錄頁面的情況啦。
但是這里需要提醒一下：
不要用pinia來存儲(chǔ)token，可能是需要配置，歡迎大佬指導(dǎo)。
要用sessionStorage.setItem來存儲(chǔ)token，不然讀取不到token，導(dǎo)致一刷新就回到登錄頁面。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Nginx學(xué)習(xí)之如何搭建文件防盜鏈服務(wù)的方法示例
這篇文章主要介紹了Nginx學(xué)習(xí)之如何搭建文件防盜鏈服務(wù)的方法示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
nginx利用信號(hào)處理機(jī)制,可以捕獲和處理各種信號(hào),本文主要介紹了nginx中的signal處理機(jī)制,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
nginx 關(guān)閉默認(rèn)站點(diǎn)的方法
國內(nèi)機(jī)房一般都要求網(wǎng)站主關(guān)閉空主機(jī)頭，防止未備案的域名指向過來造成麻煩2012-09-09
nginx配置ssl實(shí)現(xiàn)https訪問(小白文)
安全起見,需要將之前的http接口訪問變成https訪問,所以需要配置SSL證書,本文主要介紹了nginx配置ssl實(shí)現(xiàn)https訪問,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
Windows下Nginx的啟動(dòng)停止等基本操作命令詳解
在Windows下使用Nginx，我們需要掌握一些基本的操作命令，今天為大家分享幾個(gè)Windows下操作Nginx的基本命令2018-10-10
詳解nginx服務(wù)器http重定向到https的正確寫法
本篇文章主要介紹了nginx服務(wù)器http重定向到https的正確寫法 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了關(guān)于Nginx動(dòng)靜分離詳解以及配置,動(dòng)靜分離是通過中間件將動(dòng)態(tài)請(qǐng)求和靜態(tài)請(qǐng)求進(jìn)行分離，分離資源，減少不必要的請(qǐng)求消耗，減少請(qǐng)求延時(shí),需要的朋友可以參考下2023-04-04
云服務(wù)器使用寶塔搭建Python環(huán)境,運(yùn)行django程序
本文詳細(xì)講解了在云服務(wù)器使用寶塔搭建Python環(huán)境，運(yùn)行django程序的方法。對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-12-12
nginx實(shí)現(xiàn)IP地址透?jìng)鞯氖纠a
默認(rèn)后端服務(wù)器只能看到是前端nginx調(diào)度器訪問的本機(jī),本文主要介紹了nginx實(shí)現(xiàn)IP地址透?jìng)鞯氖纠a,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
nginx實(shí)現(xiàn)域名跳轉(zhuǎn)的幾種方式
本文介紹了Nginx實(shí)現(xiàn)域名跳轉(zhuǎn)的幾種常用方式,包括301永久重定向,302臨時(shí)重定向,HTTPS強(qiáng)制跳轉(zhuǎn),正則匹配跳轉(zhuǎn),具有一定的參考價(jià)值,感興趣的可以了解一下2026-01-01