面试题：Vue Router 的 history 模式为什么刷新时会出现 404 错误？

Vue Router 的 history 模式在刷新页面时出现 404 错误，是因为 history 模式依赖于浏览器的 history.pushState API，而服务器并未正确配置以支持这种模式。以下是详细的原因分析和解决方案：

1. 为什么会出现 404 错误？

在 history 模式下，Vue Router 通过 history.pushState 改变 URL，而不会向服务器发送请求。然而，当用户刷新页面或直接访问某个路由时，浏览器会向服务器请求该 URL 对应的资源。如果服务器没有正确配置，就会返回 404 错误。

示例：

假设你的应用有一个路由 /about。
在 history 模式下，用户通过导航进入 /about，URL 变为 https://example.com/about。
如果用户刷新页面，浏览器会向服务器请求 https://example.com/about。
如果服务器没有配置处理 /about 的请求，就会返回 404 错误。

2. 解决方案

要解决 history 模式下的 404 错误，需要在服务器端进行配置，确保所有路由请求都返回 index.html，由前端路由处理。

2.1 Nginx 配置

如果你使用 Nginx 作为服务器，可以添加以下配置：

server {
  listen 80;
  server_name example.com;

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

try_files 指令会尝试按顺序查找文件：
1. 查找 $uri（请求的路径）。
2. 查找 $uri/（请求的路径加上斜杠）。
3. 如果前两步都找不到，返回 index.html，由前端路由处理。

2.2 Apache 配置

如果你使用 Apache，可以添加以下配置：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

RewriteRule 将所有请求重写到 index.html，由前端路由处理。

2.3 Node.js 配置

如果你使用 Node.js（如 Express），可以添加以下中间件：

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

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

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});