vue3项目一刷新就404(亲测有效)

在 Vue 项目中遇到一刷新页面就 404 的问题，通常是因为你的前端路由（如 Vue Router）是客户端路由，依赖于 JavaScript 来管理页面之间的跳转，而不是传统的服务器端路由。这意味着，当你直接访问一个通过 Vue Router 创建的 URL（比如 /about）时，如果服务器没有正确地配置来处理这种“单页面应用”（SPA）的路由，那么服务器可能会返回 404 错误，因为它不知道如何在不执行任何 JavaScript 的情况下提供这个页面的内容。

解决这个问题通常有几种方法：

1. 配置服务器以支持 HTML5 History 模式

Vue Router 默认使用 hash 模式（即 URL 中包含 # 的模式，如 http://example.com/#/about），这种模式不会触发服务器请求，因此不会有 404 错误。但是，为了获得更优雅的 URL（即不使用 #），你可以使用 HTML5 History 模式。使用这种模式时，你需要在服务器端进行一些配置，以便对所有的路由都返回同一个 HTML 文件（通常是 index.html），该文件会加载你的 Vue 应用。

对于 Nginx：

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

对于 Apache：

确保 .htaccess 文件中包含以下内容（如果你的服务器支持 .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>

2. 使用 hash 模式

虽然这种方法不会让你的 URL 看起来那么优雅，但它是一种快速简单的解决方案，特别是当你不需要复杂的服务器配置时。你可以在 Vue Router 的配置中启用 hash 模式：

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

3. 配置路由守卫处理 404

在 Vue 应用中，你还可以设置路由守卫来捕捉 404 错误，并导航到一个自定义的 404 页面。然而，这种方法只适用于 Vue 应用已经加载的情况；如果由于服务器配置错误导致应用根本未加载，则无法生效。

4. 检查开发环境和生产环境的差异

如果你在使用像 Vue CLI 这样的工具进行开发，确保你的开发服务器（如 webpack-dev-server）配置与你的生产环境（如 Nginx、Apache 或其他任何服务器）配置相匹配。

总之，处理 Vue 项目中的 404 错误通常涉及到服务器配置，确保所有前端路由都被正确映射到你的 index.html 文件。