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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Mr_EvanChen/article/details/83625082

问题描述

     将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

展开阅读全文

没有更多推荐了,返回首页