深入剖析 Vue Router History 路由刷新页面 404 问题：原因与解决之道

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

引言

在现代前端开发中，单页面应用（SPA）凭借其流畅的用户体验和高效的性能备受青睐。Vue Router 作为 Vue.js 官方的路由管理器，为构建单页面应用提供了强大的路由功能。其中，History 模式以其美观、符合传统 URL 规范的特点，成为众多开发者的首选。然而，使用 History 模式时，刷新页面出现 404 错误是一个常见且令人头疼的问题。本文将深入探讨该问题产生的原因，并提供详细的解决方法。

History 路由模式简介

Vue Router 的 History 模式利用 HTML5 的 History API 来实现路由切换。History API 提供了 pushState 和 replaceState 方法，允许开发者在不刷新页面的情况下改变浏览器的历史记录。当用户在应用中进行导航时，Vue Router 会使用这些方法更新 URL，同时根据新的 URL 渲染相应的组件。例如，用户从 /home 导航到 /about 时，浏览器的 URL 会变为 http://example.com/about，但页面不会刷新，而是由 Vue Router 动态地渲染 About 组件。

刷新页面出现 404 错误的原因

在 History 模式下，前端路由的切换是通过 JavaScript 动态修改 URL 实现的，浏览器并不会向服务器发送新的请求。然而，当用户刷新页面时，浏览器会直接向服务器发送当前 URL 的请求。由于服务器并不了解前端的路由配置，它会尝试根据这个 URL 去查找对应的文件或资源。如果服务器上不存在与该 URL 对应的文件，就会返回 404 错误。

举个例子，假设我们的单页面应用部署在 http://example.com 上，用户访问 http://example.com/about 并在该页面刷新。此时，浏览器会向服务器发送 /about 的请求，而服务器通常没有 /about 这个实际的文件或目录，因此会返回 404 错误。

解决方法

1. 服务器端配置

Node.js + Express

如果你使用的是 Node.js 和 Express 作为服务器，可以通过以下代码进行配置：

const express = require('express');
const app = express();
const path = require('path');// 静态文件服务
app.use(express.static(path.join(__dirname, 'dist')));// 处理所有路由，返回单页面应用的入口文件
app.get('*', (req, res) => {res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});const port = process.env.PORT || 3000;
app.listen(port, () => {console.log(`Server is running on port ${port}`);
});

在上述代码中，首先使用 express.static 中间件来处理静态文件的请求。然后，使用 app.get('*', ...) 来捕获所有的请求，并返回单页面应用的入口文件 index.html。这样，无论用户访问的 URL 是什么，服务器都会返回 index.html，由前端的 Vue Router 来处理具体的路由逻辑。

Nginx

如果你使用 Nginx 作为服务器，可以在配置文件中添加以下内容：

server {listen 80;server_name example.com;root /path/to/your/app/dist;index index.html;location / {try_files $uri $uri/ /index.html;}
}

try_files 指令会按顺序尝试查找 $uri（当前请求的 URI）、$uri/（如果是目录），如果都找不到，则返回 /index.html。这样，当用户刷新页面时，Nginx 会返回 index.html，让前端的 Vue Router 来处理路由。

Apache

在 Apache 服务器中，可以通过 .htaccess 文件进行配置：

<IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /RewriteRule ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME}!-fRewriteCond %{REQUEST_FILENAME}!-dRewriteRule . /index.html [L]
</IfModule>

上述配置中，RewriteEngine On 开启了重写引擎。RewriteCond 指令用于设置条件，RewriteRule 指令用于定义重写规则。当请求的文件或目录不存在时，会将请求重定向到 index.html。

2. 前端路由兜底

在前端代码中，可以设置一个兜底路由，当匹配不到任何路由时，显示一个默认的页面。例如：

const routes = [{path: '/',component: Home},{path: '/about',component: About},{path: '*',component: NotFound}
];

在上述代码中，path: '*' 表示匹配所有未定义的路由，当用户访问一个不存在的路由时，会显示 NotFound 组件。虽然这并不能解决服务器返回 404 的问题，但可以给用户一个更好的视觉反馈。

总结

Vue Router 的 History 模式刷新页面出现 404 错误的根本原因是服务器不理解前端的路由配置。通过合理的服务器端配置，如 Node.js + Express、Nginx 或 Apache 的相关设置，将所有请求重定向到单页面应用的入口文件，可以有效解决该问题。同时，在前端设置兜底路由可以提升用户体验。掌握这些方法，能够让我们在使用 History 模式时更加得心应手，构建出更加稳定和流畅的单页面应用。