vue打包到springboot项目下出现,vue页面刷新页面404错误/Whitelabel Error Page、无法直接通过路径访问Whitelabel Error Page
vue打包到springboot项目下出现,vue页面刷新页面404错误/Whitelabel Error Page、无法直接通过路径访问Whitelabel Error Page问题描述将vue项目整合进后端项目,部署服务器后,正常使用没有问题,但是只要刷新当前页面就总是返回404错误,Whitelabel Error Page,This application has no explici..
vue打包到springboot项目下出现,vue页面刷新页面404错误/Whitelabel Error Page、无法直接通过路径访问Whitelabel Error Page
问题描述
将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);
});
}
vue打包后将dist目录下的文件复制到springboot项目src/main/resources下的static目录下面(没有static就先创建一个)自定义页面需放在static目录下,默认路径为src/main/resources/static
更多推荐
所有评论(0)