vue项目，页面刷新就404了

在 Vue.js 项目中，如果使用了

vue-router

并且路由模式设置为

history

模式，那么在刷新页面或直接访问某个路由时，可能会遇到 404 错误。这是因为

history

模式下，前端路由的路径并不匹配服务器上的实际路径，导致服务器无法找到对应的资源。

解决方案

要解决这个问题，需要在服务器配置中将所有请求重定向到

index.html

，让前端的 Vue.js 应用接管路由逻辑。

1. Nginx 配置

如果你使用 Nginx 作为服务器，可以按照以下方式配置：

server {
    listen 80;
    server_name yourdomain.com;

    root /path/to/your/dist;  # 你的 Vue 项目打包后的静态文件路径
    index index.html;

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

• **try_files $uri $uri/ /index.html;**：这个指令告诉 Nginx 先尝试请求的 URI，如果找不到，则返回 index.html，由前端路由处理。

2. Apache 配置

如果你使用 Apache 作为服务器，可以创建或修改

.htaccess

文件：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /

  # 如果请求的文件存在，则直接提供该文件
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d

  # 如果文件不存在，则重定向到 index.html
  RewriteRule . /index.html [L]
</IfModule>

3. **使用

hash

模式**

如果你不想更改服务器配置，可以考虑使用 Vue Router 的

hash

模式。这种模式会在 URL 中添加

#

，例如

example.com/#/about

。这种方式不会有刷新 404 的问题，因为

#

后的内容不会被发送到服务器。

在

router/index.js

中，将

mode

设置为

hash

：

const router =newVueRouter({mode:'hash',routes:[// 你的路由配置]});

总结

• history 模式：需要在服务器端配置，确保所有路由都重定向到 index.html。
• hash 模式：更简单，不需要服务器端配置，但 URL 中会有 #。

根据你的项目需求和服务器环境选择合适的解决方案。