部署上线的项目，正常点击可以访问，刷新页面就404，怎么解决？

最新推荐文章于 2025-03-14 20:45:00 发布

＆白帝＆

最新推荐文章于 2025-03-14 20:45:00 发布

阅读量3k

点赞数 34

分类专栏：前端部分文章标签： javascript vue.js 前端经验分享

本文链接：https://blog.csdn.net/qq_48763502/article/details/144472923

版权

前端部分专栏收录该内容

25 篇文章

订阅专栏

遇到在正常点击可以访问，但刷新页面就返回404错误的问题，通常是因为前端路由和后端路由的配置不一致，尤其是在单页应用（SPA，Single Page Application）中。以下是一些可能的解决方案，具体取决于你使用的技术栈：

1. 确保后端路由支持刷新

如果你在前端使用了如 Vue、React 或 Angular 等框架，它们通常会使用前端路由（例如 React Router 或 Vue Router）来管理 URL。这些路由在浏览器中通过 JavaScript 控制，但是当你直接刷新页面时，浏览器会尝试向后端请求该路径，而后端通常无法处理前端路由的路径，从而返回404错误。

解决方法：

配置后端的重定向：你需要在服务器端配置，当请求一个不存在的路径时，服务器应该返回前端的 index.html 文件。这会让前端路由控制页面渲染。

例如，对于 Nginx，可以配置类似如下的规则：

在这里插入图片描述
Nginx 配置详解

location / {
  try_files $uri $uri/ /index.html;
}

location / 块
在 Nginx 配置中，location 指令用来匹配特定的 URL 路径。当你写 location / 时，实际上是指定了匹配所有以 / 开头的路径，这意味着它会匹配整个站点的所有请求。

解释：
1 location /：这里的 / 是指网站的根路径，也就是任何访问你网站的请求都会进入这个配置块。比如，访问 example.com/、example.com/about 或 example.com/contact 等都会进入这个位置。
2. try_files 指令
try_files 指令是 Nginx 中非常重要的一种方法，用来尝试顺序查找文件。它的基本语法是：

try_files <file1> <file2> ... <fileN>;

Nginx 会按顺序检查给定的文件和目录，如果找到了一个存在的文件，它就会返回该文件。如果没有找到，Nginx 会返回 404 错误或执行其他指定的操作。

解释：

$uri：Nginx 内置的 $uri 变量表示当前请求的 URI。举个例子，用户请求 https://example.com/about时，$uri 的值就会是 /about。
$uri/：如果请求的是一个目录而不是具体的文件（例如用户请求 https://example.com/about/），Nginx 会在 URL 后面加上 / 来检查是否有相应的目录。如果有相应的目录，Nginx 会返回目录中的文件（如 index.html
或其他默认文件）。
/index.html：如果前面两个检查没有找到相应的文件或目录，Nginx 会将请求重定向到 /index.html。这对于单页应用（SPA）非常重要。

对于 Apache，可以使用 .htaccess 文件：

RewriteEngine On
RewriteRule ^ index.html [QSA,L]

2. 检查前端路由的模式

许多前端框架（如 Vue.js 或 React）支持两种路由模式：hash模式和history模式。

Hash模式：路径以 # 符号分隔，像这样：/app/#/page1。这种模式不会触发页面的刷新，因此不会出现刷新404的问题。
History模式：路径没有 #
符号，像这样：/app/page1。这种模式会在刷新时发送请求到服务器，如果服务器没有正确处理该请求，就会导致404错误。

解决方法：
如果你使用 History模式，确保后端能正确处理所有路径请求并返回前端应用的 index.html 文件，或者考虑切换到 Hash模式，避免刷新时出现404错误。

在 Vue Router 或 React Router 中，设置 mode 属性：

Vue Router：可以设置为 hash 模式或 history 模式。

const router = new VueRouter({
  mode: 'history',  // 或 'hash'
  routes: [...]
});

React Router：使用 BrowserRouter 或 HashRouter。

<BrowserRouter>
  <App />
</BrowserRouter>

如果改为 HashRouter，URL 会包含 # 符号，避免后端处理问题。

3. 检查服务器配置（Web 服务器、Node.js等）

如果你使用的是 Node.js 作为后端（比如通过 Express），你可以在服务器端添加一个通配符路由，确保所有请求都返回前端的 index.html，从而让前端路由来处理。

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

4. 检查文件路径和配置

确保你的文件路径正确且应用已正确构建。

对于前端构建工具（如 Webpack、Vite、Parcel 等），检查 publicPath 或 base 配置项，确保正确配置应用的基础路径。

在 Vue CLI 或 Vite 中，你可以设置 base 路径：

base: '/'

5 总结：

刷新时 404 错误通常是因为前端路由和后端路由的配置不一致，导致页面刷新时服务器无法找到对应的资源。
解决方案：确保服务器能够处理所有请求并返回 index.html，这样前端路由才可以接管并渲染正确的页面。