背景

問題描述：vue/react項目，正常的頁面操作跳轉(zhuǎn)，不會出現(xiàn)404的問題，但是一旦刷新，就會出現(xiàn)404報錯。

產(chǎn)生原因：我們打開vue/react打包后生成的dist文件夾，可以看到只有一個 index.html 文件及一些靜態(tài)資源，這個是因為vue/react是單頁應(yīng)用(SPA)，只有一個index.html作為入口文件，其它的路由都是通過JS來進行跳轉(zhuǎn)的。
而網(wǎng)頁上顯示的是靜態(tài)資源的絕對路徑，雖然瀏覽器上的url變化了，但實際上服務(wù)器的靜態(tài)資源是沒有更改路徑的，始終只有index.html這一個入口，所以刷新就會導(dǎo)致url上的路徑和服務(wù)器上的資源不匹配，無法找到靜態(tài)資源，從而報錯404。（多頁應(yīng)用因為有多個入口文件，所以不會有這樣的問題）。

接下來我們看看服務(wù)器上的nginx配置：

server {
  // 監(jiān)聽80端口
  listen 80;
  // 定義你的站點名稱
  server_name website.com;
  // 根據(jù)請求 URI 設(shè)置配置
  location / {
      // 站點根目錄，這里為 vue 構(gòu)建出來的 dist 目錄
      root   /www/dist;
      // 站點初始頁為index.html 或 index.htm
      index  index.html index.htm;
  }
}

根據(jù)nginx配置我們可以得出，當(dāng)我們在地址欄輸入域名（如www.xxx.com）時，這時會打開我們 dist 目錄下的 index.html 文件，然后我們再通過頁面操作跳轉(zhuǎn)路由進入到 www.xxx.com/login，關(guān)鍵在這里，當(dāng)我們在 www.xxx.com/login 頁執(zhí)行刷新操作，nginx location 是沒有相關(guān)配置的，所以就會出現(xiàn) 404 的情況。

解決辦法

法1：將vue/react路由模式由history路由改為hash路由

為什么hash模式下沒有問題：

hash路由的原理是onhashchange事件，hash模式下，僅hash符號之前的內(nèi)容會被包含在http請求中，如www.xxx.com/#/login，hash的值為 #/login，hash值#/login雖然出現(xiàn)在 url中，但不會被包括在http請求中，其只會請求www.xxx.com，對服務(wù)端完全沒有影響，因此改變hash不會重新加載頁面，即使服務(wù)器nginx沒有配置location，也不會返回404錯誤。

history模式：原理是利用了h5的Interface 中的pushState()方法和replaceState()方法，它們提供了對瀏覽器歷史記錄進行修改的功能，但當(dāng)它們執(zhí)行修改時，雖然改變了當(dāng)前的 URL，但瀏覽器不會立即向服務(wù)器發(fā)送請求，因此history模式正常頁面操作跳轉(zhuǎn)路由，是不會再次發(fā)送http資源請求的。但是當(dāng)刷新的時候，由于url已經(jīng)改變，如www.xxx.com/login會完整地向服務(wù)器請求相關(guān)資源，所以就會造成對應(yīng)路徑的資源找不到，從而返回404。

但是使用hash路由，url上會攜帶#號標(biāo)志，且history模式的同步更新瀏覽器歷史記錄功能就沒有了。

法2：在服務(wù)器nginx配置文件里，添加如下代碼，再重啟nginx，刷新網(wǎng)頁就OK了

location / {
 try_files $uri $uri/ @rewrites;
 index index.html;
}
location @rewrites {
  rewrite ^.*$ /index.html last;
}

文章參考

• https://www.cnblogs.com/echohye/p/16566706.html
• http://m.fzitv.net/article/256217.htm
• https://www.cnblogs.com/ling-yu-amen/p/11533726.html

總結(jié)

到此這篇關(guān)于vue/react項目刷新頁面出現(xiàn)404報錯的原因及解決辦法的文章就介紹到這了,更多相關(guān)vue/react項目刷新頁面404內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論