ThinkPHP5和Vue.js结合使用history模式刷新页面出现404，如何解决？-php教程-PHP中文网

ThinkPHP5和Vue.js结合使用history模式刷新页面出现404，如何解决？

碧海醫心

发布： 2025-03-16 10:44:26

原创

851人浏览过

thinkphp5和vue.js结合使用history模式刷新页面出现404，如何解决？

ThinkPHP5与Vue.js结合：History模式刷新页面404问题的解决方案

在ThinkPHP5后端和Vue.js前端结合的项目中，使用history模式打包前端项目并部署到ThinkPHP5的public目录后，刷新页面常出现404错误。本文将分析此问题并提供解决方案。

问题描述：项目后端采用ThinkPHP5构建API接口，前端使用Vue.js并配置history模式路由。前端代码打包后部署在ThinkPHP5的public目录下。刷新页面时，浏览器返回404错误，如下图所示。同时，Nginx配置文件如下：

<code>location / {
  root   e:/www/doctorlink/public;
  index  index.php index.html index.htm;

if (!-e $request_filename){
  rewrite  ^(.*)$  /index.php?s=$1  last;   break;
}
}</code>

登录后复制

此Nginx配置在处理静态资源方面存在缺陷，导致Vue.js history模式下刷新页面时路由匹配失败，从而返回404。

立即学习“PHP免费学习笔记（深入）”；

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

查看详情

解决方案：修改Nginx配置文件，使其正确处理Vue.js history模式的路由请求。建议将Nginx配置修改为：

<code>location / {
    root E:/www/doctorLink/public;
    index index.html;

    #解决404
    try_files $uri $uri/ /index.html;
  }</code>

登录后复制

修改后的配置关键在于try_files $uri $uri/ /index.html; 这行指令。它依次尝试：

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

这样，即使请求的URI没有对应实际文件，Nginx也会返回index.html，由Vue.js路由机制处理，避免404错误。通过此修改，即可解决ThinkPHP5和Vue.js结合使用history模式时刷新页面报404的问题。

以上就是ThinkPHP5和Vue.js结合使用history模式刷新页面出现404，如何解决？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

ThinkPHP框架怎么使用Session_ThinkPHP会话管理与安全配置方法 ThinkPHP框架怎么使用钩子函数_ThinkPHP行为触发与事件监听 ThinkPHP框架怎么定义模型_ThinkPHP模型定义与关联查询使用方法 ThinkPHP框架怎么使用模板继承_ThinkPHP模板布局与区块管理实现PHP框架的SEO优化_通过ThinkPHP完成php框架怎么用的策略