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

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

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

問題假設(shè)

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

原理探究

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

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

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

問題解決

當(dāng)使用Vue Router時，前端路由是在客戶端進行處理的，而Nginx作為反向代理服務(wù)器默認(rèn)只處理靜態(tài)文件的請求。這就是為什么直接訪問 xxx.xxx.xxx.xxx:/home 時正常工作，但刷新頁面時會出現(xiàn)404錯誤的原因。
使用通配符來配置Nginx，以使其將所有路由請求都指向Vue應(yīng)用的 index.html，確保所有的路由請求都交給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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: