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

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

问题分析

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

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

解决方法

为了解决这个问题，需要在 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 错误。

以上就是ThinkPHP5和Vue项目刷新页面出现404错误如何解决？的详细内容，更多请关注php中文网其它相关文章！

https://www.php.cn/faq/1122396.html