ThinkPHP5与Vue.js结合：History模式刷新页面404问题的解决方案
在ThinkPHP5后端和Vue.js前端结合的项目中，使用history模式打包前端项目并部署到ThinkPHP5的public目录后，刷新页面常出现404错误。本文将分析此问题并提供解决方案。
问题描述：项目后端采用ThinkPHP5构建API接口，前端使用Vue.js并配置history模式路由。前端代码打包后部署在ThinkPHP5的public目录下。刷新页面时，浏览器返回404错误，如下图所示。 同时，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;}}
此Nginx配置在处理静态资源方面存在缺陷，导致Vue.js history模式下刷新页面时路由匹配失败，从而返回404。
立即学习“PHP免费学习笔记（深入）”；
解决方案：修改Nginx配置文件，使其正确处理Vue.js 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文件。
这样，即使请求的URI没有对应实际文件，Nginx也会返回index.html，由Vue.js路由机制处理，避免404错误。 通过此修改，即可解决ThinkPHP5和Vue.js结合使用history模式时刷新页面报404的问题。
以上就是ThinkPHP5和Vue.js结合使用history模式刷新页面出现404，如何解决？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1255740.html
微信扫一扫 
支付宝扫一扫 
