Spring Boot+Vue前后端分离，如何避免前端页面 404，2024年最新Web前端体系化进阶学习图谱

前后端分离项目中，如果遇到Vue前端页面出现404错误，通常是因为前端资源没有被正确地部署到服务器上，或者是前端的路由配置与后端的API接口路径不匹配。

解决方法：

1. 确认前端资源是否已正确部署到服务器。
2. 检查前端路由模式是否与后端API路径一致。
3. 确保Vue路由使用的是history模式时，服务器需要正确配置来支持SPA的路由。
4. 如果使用了Nginx等服务器，确保配置了正确的代理规则，以便在前端页面未找到时，可以正确地回退到指定的后备页面或重定向到首页。

以下是一个简单的Nginx配置示例，用于支持单页面应用（SPA）的路由：

server {
    listen 80;
    server_name your-domain.com;
 
    location / {
        try_files $uri $uri/ /index.html;
    }
 
    location /api/ {
        proxy_pass http://backend-server-url;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

在这个配置中，当请求的路径不对应服务器上的文件时，Nginx会尝试提供index.html，这样前端的路由器可以接管路由，避免404错误。同时，所有以/api/开头的请求都会被转发到后端API服务器。