ThinkPHP5与Vue.js项目：彻底解决前端路由刷新404难题
在ThinkPHP5后端和Vue.js前端结合的项目中，使用history模式路由后，刷新页面常出现404错误。本文通过一个案例分析并提供解决方案。
案例：后端采用ThinkPHP5构建API，前端用Vue.js开发，打包后的前端代码位于ThinkPHP5项目的public目录下，并使用了history模式路由。Nginx服务器配置使用了rewrite规则将所有请求转发到index.php。刷新页面时，仍然出现404错误（图片略）。
根本原因：history模式下，URL路径不包含#符号。刷新页面时，浏览器直接向服务器请求该URL路径对应的资源。若服务器未找到该资源（因为这些路径对应前端路由，而非服务器真实文件），则返回404错误。原有的Nginx配置无法处理前端路由请求。
立即学习“PHP免费学习笔记（深入）”；
解决方案：修改Nginx配置，让Nginx直接处理前端路由请求，而非全部转发到index.php。使用try_files指令：
location / { root E:/www/doctorLink/public; index index.html; # 解决404 try_files $uri $uri/ /index.html;}
这段配置指定public目录为根目录，index.html为默认索引文件。try_files $uri $uri/ /index.html;指令依次尝试：
$uri：请求的URI对应的文件。$uri/：如果URI指向目录，则寻找该目录下的索引文件。/index.html：若以上步骤失败，则返回index.html。
这样，刷新页面时，Nginx先尝试寻找资源文件，若未找到，则返回index.html，由Vue.js路由处理，避免404错误。此方法比rewrite指令更有效、简洁高效。
以上就是ThinkPHP5和Vue.js结合，前端路由刷新页面出现404错误如何解决？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1255497.html
微信扫一扫 
支付宝扫一扫 
