Thinkphp5与vue.JS结合：前端刷新404问题详解及解决方案
在使用thinkphp5作为后端API，Vue.js作为前端框架的项目中，如果前端采用history模式打包，并将代码部署在ThinkPHP5的public目录下，刷新页面时可能会遇到404错误。本文将深入分析此问题，并提供有效的解决方案。
问题描述：
后端采用ThinkPHP5构建API接口，前端使用Vue.js并采用history模式进行路由配置。打包后的前端静态文件放置在ThinkPHP5的public目录下。然而，浏览器直接刷新页面时，却返回404错误。 (示例图片省略)
立即学习“PHP免费学习笔记（深入）”；
假设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服务器无法正确处理history模式下的路由请求。当用户刷新页面时，浏览器直接向服务器请求URL，而history模式的URL并非真实存在的静态文件，而是由前端路由控制的。 原有的Nginx配置使用if (!-e $request_filename)语句，仅处理不存在的文件情况，并将请求转发给index.php。但对于history模式生成的URL，index.php无法正确处理，导致404错误。
解决方案：
为了解决此问题，需要修改Nginx配置文件，增加对history模式路由的处理。 推荐修改后的Nginx配置如下：
location / { root E:/www/doctorLink/public; index index.html; # 解决404 try_files $uri $uri/ /index.html; }
关键在于try_files $uri $uri/ /index.html; 这行代码。它会依次尝试：
- $uri：查找请求URI对应的文件。
- $uri/：查找请求URI对应的目录。
- /index.html：如果前两者都不存在，则查找根目录下的index.html文件。
通过这种方式，即使是history模式生成的URL，Nginx也会尝试查找index.html，从而正确返回前端页面，有效避免404错误。 此方法比之前的rewrite方式更简洁高效，也更符合history模式的处理逻辑。
