F5刷新页面404

更新: 2025/7/12 字数: 0 字 时长: 0 分钟

“单页面应用(SPA)” 经典问题（Vue、React等框架都会遇到）

问题原因

客户端路由: 在您的网站上，页面切换（比如从首页到登录页 /login）是由浏览器里的 Vue.js 代码在客户端完成的。服务器对此一无所知。🧐

刷新请求: 假设当您在 https://www.hyper99.shop/login 这个地址上按下刷新时，浏览器会向服务器发送一个请求，要求获取 /login 这个文件。

服务器响应: 您的 Nginx 服务器在网站根目录里找了一圈，发现并没有一个叫做 login 的文件或文件夹，于是它只能返回 404 Not Found 错误。

解决方案

解决方法很简单，我们需要告诉 Nginx：“嘿，如果浏览器请求的任何页面你都找不到，别直接报404，统一把 index.html 文件发给它就行了。” 浏览器拿到 index.html 后，里面的 Vue.js 代码就会接管路由，看到地址栏是 /login，就自动为您显示正确的登录页面了。

location / {
    root /www/wwwroot/www.hyper99.shop; # 确保这个路径是您网站的正确根目录
    try_files $uri $uri/ /index.html; [!code focus]
    index index.html index.htm;
}

中间这一行会指示 Nginx 在找不到用户请求的文件或目录时，返回 /index.html 作为后备

TIP

$uri: 尝试按文件名查找（找一个叫 login 的文件）。

$uri/: 如果找不到，就尝试按目录名查找（找一个叫 login 的文件夹）。

/index.html: 如果还找不到，就返回根目录下的 index.html 文件。

在PHP-INFO-START前加上即可

这样， Vue 应用就可以接管路由，正确显示页面内容了

再次刷新，页面就可以保持原有路由界面或是跳转首页😋