背景

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

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

接下來我們看看服務器上的nginx配置：

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

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

解決辦法

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

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

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

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

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

法2：在服務器nginx配置文件里，添加如下代碼，再重啟nginx，刷新網頁就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://chabaoo.cn/article/256217.htm
• https://www.cnblogs.com/ling-yu-amen/p/11533726.html

總結

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

最新評論