ThinkPHP5和Vue.js结合，前端刷新出现404错误如何解决？

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; 这行代码。它会依次尝试：

1. $uri：查找请求URI对应的文件。
2. $uri/：查找请求URI对应的目录。
3. /index.html：如果前两者都不存在，则查找根目录下的index.html文件。

通过这种方式，即使是history模式生成的URL，Nginx也会尝试查找index.html，从而正确返回前端页面，有效避免404错误。 此方法比之前的rewrite方式更简洁高效，也更符合history模式的处理逻辑。

以上就是ThinkPHP5和Vue.js结合，前端刷新出现404错误如何解决？的详细内容，更多请关注php中文网其它相关文章！