在 Vue 项目本地开发完成后，部署到服务器时出现 404 错误，通常是由于 Vue Router 的 history 模式 配置问题导致的。下面我会详细解释这个问题的原因、为什么在 history 模式下会出现问题，为什么在 hash 模式下没有问题，并提供解决方案。

1. Vue Router 的 History 模式和 Hash 模式的区别

• History 模式：使用浏览器的 History API 来实现路由，URL 看起来像普通的路径 http://example.com/about。这种模式非常干净，但需要服务器端进行配置，以正确处理路由路径。
• Hash 模式：使用 URL 中的 hash (#) 来表示不同的路由，URL 看起来像 http://example.com/#/about。这种模式不需要服务器配置，因为浏览器只会关注 # 后面的部分，服务器只会返回相同的静态文件。

在本地开发时，使用的通常是 History 模式，这种模式下，浏览器的地址栏会显示普通的路径（如 /about），而不包含 #。但当部署到服务器时，如果服务器没有正确处理这些路径，直接访问这些路径时会导致 404 错误。

2. 为什么 History 模式下会出问题？

在 History 模式 下，Vue Router 会将路由路径直接添加到 URL 中，比如 /about，而不是 /#/about。这种情况下，服务器在收到请求时，可能无法找到 /about 这个路径的文件，导致 404 错误。

默认情况下，当用户访问一个路径（如 /about）时，服务器会去查找相应的文件，但 Vue 项目是单页面应用（SPA），只有一个 HTML 文件（通常是 index.html）。这时，服务器应该返回 index.html，然后由客户端的 Vue Router 来处理不同的路由。

但是，如果服务器没有做相应的配置，它会把 /about 作为一个文件路径去查找，导致找不到文件，从而返回 404 错误。

3. 为什么 Hash 模式下没有问题？

在 Hash 模式 下，路径被表示为 URL 的 hash 部分（