問題假設(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ù)器的工作方式。文章來源地址http://www.zghlxwxcb.cn/news/detail-722423.html

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