Question

我正在构建一个正在通过Docker容器运行的Vue.JS和Spring Boot应用程序。 Vue的dist文件夹已复制到资源/公共路径，并通过Spring Boot服务提供服务。

我已经使用vue路由器设置了路由，但是所有这些路由在直接输入浏览器时都返回404 - Not found（但是通过Vue应用程序访问时可以正常工作）。

vue路由器：

    export default new Router({
  mode: 'history',
  routes: [{
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/result',
      name: 'result',
      component: Result,
      props: true
    },
    {
      path: '/result/:userid',
      name: 'autoResult',
      component: Result,
      props: true
    }
  ]
})

我需要/ result / userid不返回404-而是获取userid并呈现结果页面。这可能上班吗？

我要做的另一件事是将所有未映射的404页面重定向到任何api / vue页面，以返回到起始页面。我曾尝试使用Spring Boot implements ErrorController，但无法使重定向正常工作。

编辑：

我尝试添加以下控制器建议：

@ControllerAdvice
public class WebConfig {

    @ExceptionHandler(NoHandlerFoundException.class)
    public String renderDefaultPage(NoHandlerFoundException e) {
        return "classpath:public/index.html";
    }

}

以及以下属性：

spring.mvc.throw-exception-if-no-handler-found=true
spring.resources.add-mappings=false
spring.mvc.static-path-pattern=/static/**
spring.resources.static-locations=classpath:public/static/

但是当我现在尝试访问首页（或任何其他URL）时，我得到了stackOverflowException，服务器开始做一个无限循环，说：

2019-03-05 13:26:24.298  WARN 22044 --- [nio-8080-exec-1] o.s.web.servlet.PageNotFound             : No mapping for GET /classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/classpath:public/index.html

Answer 1

在您的情况下，发生的事情是Spring Boot正在接受请求，并且由于没有映射到URL，因此您得到的是404。您想要发生的事情是允许您的Vue.js应用处理未映射的URL。（即，将所有未映射的URL重定向到您的index.html。）

您需要做的第一件事是将其添加到路由器的路由配置中：

export default new Router({
    mode: 'history',
    routes: [{
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/result',
        name: 'result',
        component: Result,
        props: true
    },
    {
        path: '/result/:userid',
        name: 'autoResult',
        component: Result,
        props: true
    },
    {
        path: '*',
        component: NotFound
    }
  ]
})

在这里，我们添加了一条额外的路径作为渲染组件的最后一条路径（因为路径是顺序匹配的）。

此后，您需要使Spring启动将每个不匹配的请求重定向到index.html，为此，您希望spring在查找和未映射的路由时抛出异常，并在异常的处理程序中将其重定向到您的index.html。

首先，将此行添加到您的application.properties：

spring.mvc.throw-exception-if-no-handler-found=true

并添加ControllerAdvice来处理引发的异常，如下所示：

//In some controller or inside a @ControllerAdvice annotated class
@ExceptionHandler(NoHandlerFoundException.class)
String noHandlerFound(NoHandlerFoundException ex){
    return "classpath:index.html";
}

Here you can find a little bit more info on making Spring boot redirect unmapped requests to your index.html

Answer 2

解决了以下代码：

@Controller
public class RoutesController implements ErrorController {
    private static final String PATH = "/error";

    @RequestMapping(value = PATH)
    public String error() {
        return "forward:/";
    }

    @Override
    public String getErrorPath() {
        return PATH;
    }
}

Answer 3

不幸的是，以上答案都不适合我，幸运的是我在另一个帖子中找到了这个答案： https://stackoverflow.com/a/59290035/1254782

它简单而简短，对我的用例来说就像一个魅力，它可能与原始问题略有不同，但我认为它非常相似。对于从 Spring Boot 后端寻找服务 vuejs SPA 的人来说，这可能很有用。

Vue.JS和Spring Boot-重定向到404主页

3 个答案: