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模式的處理邏輯。