背景

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

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

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

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

根據(jù)nginx配置我們可以得出，當(dāng)我們?cè)诘刂窓谳斎胗蛎ㄈ鐆ww.xxx.com）時(shí)，這時(shí)會(huì)打開(kāi)我們 dist 目錄下的 index.html 文件，然后我們?cè)偻ㄟ^(guò)頁(yè)面操作跳轉(zhuǎn)路由進(jìn)入到 www.xxx.com/login，關(guān)鍵在這里，當(dāng)我們?cè)?www.xxx.com/login 頁(yè)執(zhí)行刷新操作，nginx location 是沒(méi)有相關(guān)配置的，所以就會(huì)出現(xiàn) 404 的情況。

解決辦法

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

為什么hash模式下沒(méi)有問(wèn)題：

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

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

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

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

總結(jié)

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

最新評(píng)論