【SpringBoot】vue刷新页面404错误，自定义指向页面

问题描述

将vue项目整合进后端项目，部署服务器后，正常使用没有问题，但是只要刷新当前页面就总是返回404错误，Whitelabel Error Page，This application has no explicit mapping for /error, so you are seeing this as a fallback。上网查看很多原因，有的说是没有配置视图解析器，有的说是application启动类放置的位置不对，有的说是controller的路径写的不对造成的。

问题原因

我理解的原因是，正常情况下我们刷新页面，那么浏览器就会按照url去后台请求数据。但是在vue项目中，url只是在router中定义的跳转路径（并不是controller中的mapping），当跳转到某页面之后会在调用api（比如说在created的时候）去后台请求数据。那么我们刷新页面，浏览器会认为url是对应controller中的mapping，但实际上后台根本没有对应的方法，因此报错。

解决办法

vue项目与后端项目整合是通过install打包前端项目，然后把打包完产生的dist文件夹下的static文件夹和index.html放到后端项目的static路径下，其实最终整个前端项目都被编译成js文件，由index.html进行渲染。因此我这里通过捕获404HTTP错误状态码自定义页面，将页面指向了index.html，由其进行解析。解决办法就是在启动类加上如下代码：

@Bean
public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer(){
	return factory -> {
           ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");
           factory.addErrorPages(error404Page);
	};
}

需要注意的是，这是SpringBoot版本在2.0以上的写法。2.0之后EmbeddedServletContainerCustomizer 类被WebServerFactoryCustomizer取代了。2.0以下的可以参考如下代码：

@Bean
public EmbeddedServletContainerCustomizer containerCustomizer() {

   return (container -> {
        ErrorPage error401Page = new ErrorPage(HttpStatus.UNAUTHORIZED, "/401.html");
        ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/404.html");
        ErrorPage error500Page = new ErrorPage(HttpStatus.INTERNAL_SERVER_ERROR, "/500.html");

        container.addErrorPages(error401Page, error404Page, error500Page);
   });
}

自定义页面需放在static目录下，默认路径为src/main/resources/static