ThinkPHP5和Vue.js結(jié)合,前端刷新出現(xiàn)404錯誤如何解決?

ThinkPHP5和Vue.js結(jié)合,前端刷新出現(xiàn)404錯誤如何解決?

Thinkphp5與vue.JS結(jié)合:前端刷新404問題詳解及解決方案

在使用thinkphp5作為后端API,Vue.js作為前端框架的項(xiàng)目中,如果前端采用history模式打包,并將代碼部署在ThinkPHP5的public目錄下,刷新頁面時可能會遇到404錯誤。本文將深入分析此問題,并提供有效的解決方案。

問題描述:

后端采用ThinkPHP5構(gòu)建API接口,前端使用Vue.js并采用history模式進(jìn)行路由配置。打包后的前端靜態(tài)文件放置在ThinkPHP5的public目錄下。然而,瀏覽器直接刷新頁面時,卻返回404錯誤。 (示例圖片省略)

立即學(xué)習(xí)PHP免費(fèi)學(xué)習(xí)筆記(深入)”;

假設(shè)nginx配置文件如下:

location / {     root   e:/www/doctorlink/public;     index  index.php index.html index.htm;      if (!-e $request_filename){         rewrite  ^(.*)$  /index.php?s=$1  last;   break;     } }

問題分析:

404錯誤的根本原因在于Nginx服務(wù)器無法正確處理history模式下的路由請求。當(dāng)用戶刷新頁面時,瀏覽器直接向服務(wù)器請求URL,而history模式的URL并非真實(shí)存在的靜態(tài)文件,而是由前端路由控制的。 原有的Nginx配置使用if (!-e $request_filename)語句,僅處理不存在的文件情況,并將請求轉(zhuǎn)發(fā)給index.php。但對于history模式生成的URL,index.php無法正確處理,導(dǎo)致404錯誤。

解決方案:

為了解決此問題,需要修改Nginx配置文件,增加對history模式路由的處理。 推薦修改后的Nginx配置如下:

location / {     root E:/www/doctorLink/public;     index index.html;      # 解決404     try_files $uri $uri/ /index.html; }

關(guān)鍵在于try_files $uri $uri/ /index.html; 這行代碼。它會依次嘗試:

  1. $uri:查找請求URI對應(yīng)的文件。
  2. $uri/:查找請求URI對應(yīng)的目錄。
  3. /index.html:如果前兩者都不存在,則查找根目錄下的index.html文件。

通過這種方式,即使是history模式生成的URL,Nginx也會嘗試查找index.html,從而正確返回前端頁面,有效避免404錯誤。 此方法比之前的rewrite方式更簡潔高效,也更符合history模式的處理邏輯。

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點(diǎn)贊6 分享