nginx代理部署Vue刷新頁面404的問題解決

更新時(shí)間：2023年12月06日 09:07:20 作者：緣友一世

在上線vue開發(fā)的前端網(wǎng)頁部署在服務(wù)器上后,刷新頁面顯示404,本文就來介紹一下nginx代理部署Vue刷新頁面404的問題解決,感興趣的可以了解一下

問題假設(shè)

部署出現(xiàn)的問題為：由于項(xiàng)目中使用的vue router 項(xiàng)目直接使用node環(huán)境部署項(xiàng)目，在同一個(gè)路由如: 192.168.1.30:/home刷新瀏覽器正常 nginx部署刷新不出現(xiàn)404 /nginx not found 如何解決？
以下是我的想法：似乎是nginx代理使其直接訪問文件，而沒有使項(xiàng)目的路由生效從而正確加載資源

原理探究

這種Nginx配置背后的原理涉及到前端路由和服務(wù)器的工作方式。

前端路由：
- 在前端開發(fā)中，SPA（Single Page Application）應(yīng)用程序使用前端路由來實(shí)現(xiàn)頁面切換和導(dǎo)航。
- 前端路由是在瀏覽器中處理的，而不是通過傳統(tǒng)的頁面請(qǐng)求和刷新。
- SPA應(yīng)用通常使用JavaScript庫或框架（如Vue Router、React Router等）來管理前端路由。
- 這些路由庫允許應(yīng)用程序的不同路徑映射到不同的組件或頁面。
服務(wù)器處理：
- 當(dāng)瀏覽器發(fā)出請(qǐng)求時(shí)，Web服務(wù)器（如Nginx）會(huì)根據(jù)請(qǐng)求的路徑來定位并返回相應(yīng)的資源或頁面。
- 在傳統(tǒng)的Web應(yīng)用中，服務(wù)器會(huì)查找匹配的HTML文件并將其發(fā)送給瀏覽器。然而，在SPA中，服務(wù)器通常只返回應(yīng)用的入口點(diǎn)（例如，index.html），而所有的路由和頁面切換是在瀏覽器中通過前端路由進(jìn)行管理的。
問題的根本：
- 當(dāng)使用前端路由時(shí)，如果你直接訪問特定路徑，例如 http://example.com/home，瀏覽器中的前端路由會(huì)正確解析這個(gè)路徑并顯示對(duì)應(yīng)的頁面，因?yàn)镴avaScript路由庫知道如何處理它。然而，如果你刷新頁面，或者直接在地址欄中輸入U(xiǎn)RL，服務(wù)器會(huì)嘗試查找與該路徑匹配的實(shí)際文件，但在SPA中，通常沒有與每個(gè)路由路徑相對(duì)應(yīng)的獨(dú)立HTML文件，因此服務(wù)器會(huì)返回404錯(cuò)誤。
解決方案：
- 為了解決這個(gè)問題，需要配置Nginx，以便對(duì)所有請(qǐng)求都返回應(yīng)用的入口點(diǎn)（通常是 index.html）。這樣，不管瀏覽器中的路徑是什么，服務(wù)器都會(huì)返回相同的index.html。一旦瀏覽器加載了這個(gè)HTML文件，前端路由庫會(huì)根據(jù)URL來呈現(xiàn)正確的頁面內(nèi)容。

所以，Nginx配置的關(guān)鍵點(diǎn)是將所有請(qǐng)求都傳遞給Vue應(yīng)用的 index.html，這個(gè)HTML文件包含了前端路由的邏輯，它會(huì)根據(jù)URL來呈現(xiàn)不同的內(nèi)容，從而確保前端路由能夠正確處理所有的路由請(qǐng)求，無論是直接訪問還是刷新頁面。
它解決了前端路由在SPA中的刷新問題，讓SPA應(yīng)用可以在不同的路由之間無縫導(dǎo)航。

問題解決

當(dāng)使用Vue Router時(shí)，前端路由是在客戶端進(jìn)行處理的，而Nginx作為反向代理服務(wù)器默認(rèn)只處理靜態(tài)文件的請(qǐng)求。這就是為什么直接訪問 xxx.xxx.xxx.xxx:/home 時(shí)正常工作，但刷新頁面時(shí)會(huì)出現(xiàn)404錯(cuò)誤的原因。
使用通配符來配置Nginx，以使其將所有路由請(qǐng)求都指向Vue應(yīng)用的 index.html，確保所有的路由請(qǐng)求都交給Vue Router處理。

server {
    listen       80;
    server_name  demo;
    
    location / {
        root   /usr/carehome_vue;
        index  index.html index.htm;
        # 配置讓Vue Router處理路由
        try_files $uri $uri/ /index.html; 
    }
}

到此這篇關(guān)于nginx代理部署Vue刷新頁面404的問題解決的文章就介紹到這了,更多相關(guān)nginx Vue刷新頁面404內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: