部署在Render的全栈Java Spring Boot应用点击按钮出现NotFound问题求助

核心原因 #

Vue使用history模式时，前端路由的URL会直接请求服务器，而Render默认不会为这些前端路径返回index.html，导致404。本地开发时dev-server自动处理了路由转发，但生产环境需要额外配置。

具体解决步骤 #

1. 修正前端路由base配置 #

直接将路由的base设置为根路径，避免环境变量可能的异常：

const router = new Router({
  mode: 'history',
  base: '/',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: { requiresAuth: true }
    },
    {
      path: "/login",
      name: "login",
      component: Login,
      meta: { requiresAuth: false }
    },
    {
      path: "/logout",
      name: "logout",
      component: Logout,
      meta: { requiresAuth: false }
    }
 ]
})

2. 添加Render路由重写规则 #

在前端项目的public目录下新建_redirects文件，写入以下内容：

/*    /index.html   200

该文件会让Render服务器将所有未匹配到的请求都返回index.html，交给Vue前端路由处理。

3. 后端（Spring Boot）路由转发配置（如果前后端同服务部署） #

如果你的Spring Boot后端和前端静态文件部署在同一个Render服务中，添加一个控制器处理路由转发：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class RouteForwardController {
    // 匹配所有非文件路径的请求，转发到index.html
    @GetMapping(value = "/**/{path:[^.]*}")
    public String forwardToIndex() {
        return "forward:/index.html";
    }
}

确保该控制器的路由优先级低于你的API接口，避免API请求被错误转发。

4. 优化登出跳转逻辑 #

使用Vue Router的编程式导航替代直接跳转，确保路由由前端处理：

// 在Logout组件的created钩子中执行登出和跳转
created() {
    // 清除登录状态（比如token）
    localStorage.removeItem('authToken');
    // 跳转到登录页
    this.$router.push({ name: 'login' });
}

内容的提问来源于stack exchange，提问作者Jay Wu