Vue 项目中使用 `history` 路由模式刷新页面报错 404 的原因及解决方法

今天面试中面试官问道我对Ngnix的理解： 当我说到通过配置ngnix处理history模式下刷新404问题的时候，他问我是什么原因造成的404呢？ 我一下被问住了，之前也没有去了解过。回来了解了一下明白了

原因

在 Vue 项目中使用 history 模式时，URL 不包含 #，例如 example.com/user/profile。这种模式利用了 HTML5 的 History API 来管理路由，路径看起来更干净。然而，这也带来了一个问题：当用户刷新页面或直接访问某个嵌套路由时，浏览器会向服务器发出请求。

如果服务器没有适当配置来处理这些请求，它会尝试寻找与该 URL 对应的物理文件。例如，当用户访问 example.com/user/profile 时，服务器会寻找 example.com/user/profile 这个路径对应的文件。如果服务器找不到相应的文件，它将返回 404 错误。

相当于刷新后浏览器认为要访问的url地址是example.com/user/profile而不是example.com。显然前者在服务端是没有配置的，找不到对应的url所以404

为什么 hash 模式不会有这个问题

hash 模式在 URL 中使用 # 作为分隔符，例如 example.com/#/user/profile。浏览器在处理 URL 时，不会将 # 之后的部分发送到服务器。因此，无论用户访问哪个路由，服务器接收到的始终是根路径，例如 example.com。前端的 Vue 路由器可以根据 # 之后的路径正确渲染页面。这就是为什么 hash 模式在刷新页面或直接访问路由时不会出现 404 错误。

解决方法

目前我只采用过Ngnix配置的方式

无论使用的是哪个服务器，核心思想都是确保所有未知的路由都指向你的 index.html 文件。查阅相应服务器的文档以了解如何配置重定向。

Ngnix代理

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

Apache 服务器

在项目根目录中创建或修改 .htaccess 文件：

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