vue打包到springboot项目下出现，vue页面刷新页面404错误/Whitelabel Error Page、无法直接通过路径访问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