ThinkPHP5和Vue项目刷新页面出现404错误如何解决？

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《ThinkPHP5和Vue项目刷新页面出现404错误如何解决？》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

thinkphp5 与 vue 前端刷新页面报 404 错误的解决方法

在使用 thinkphp5 作为后端和 vue.js 作为前端开发时，遇到了刷新页面出现 404 错误的情况。具体表现为：在前端代码打包后，将其放置在 public 文件夹下后，刷新页面就会报错。

问题分析

这个问题产生的原因在于，nginx 的配置没有正确处理刷新页面时的路由。由于前端使用的是 history 模式，刷新时不会触发后端路由，而是直接请求前端代码对应的路径。如果 nginx 配置中没有针对这些路径的处理规则，就会报 404 错误。

解决方法

为了解决这个问题，需要在 nginx 配置中添加 try_files 指令，以确保刷新页面时正确处理请求。修改后的 nginx 配置如下：

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

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

在这个配置中，try_files 指令的作用是：

1. 尝试寻找 $uri 指定的文件。
2. 如果文件不存在，则尝试寻找 $uri/ 指定的目录。
3. 如果目录也不存在，则尝试寻找 /index.html 文件。

通过这种方式，nginx 可以正确处理刷新页面的请求，并确保始终加载 index.html 文件，从而避免 404 错误。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~