当前位置:   article > 正文

vue打包到springboot项目下出现,vue页面刷新页面404错误/Whitelabel Error Page、无法直接通过路径访问Whitelabel Error Page_vue打包后 whitelabel error page

vue打包后 whitelabel error page

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);
	};
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
需要注意的是,这是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);
   });
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

vue打包后将dist目录下的文件复制到springboot项目src/main/resources下的static目录下面(没有static就先创建一个)自定义页面需放在static目录下,默认路径为src/main/resources/static

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/619380
推荐阅读
相关标签
  

闽ICP备14008679号