问题描述：springboot中集成vue项目,由于要求用jar包部署方式,vue构建之后(路由为history模式)dist目录中文件直接放到/resources/static/底下,访问localhost:8080 可以访问到vue项目.路由跳转也没问题,但是问题是不能刷新和地址栏输入地址。
如果不是必须使用history模式的话，hash模式带#号完全不影响使用，不存在不能刷新和url输入访问的问题。history模式下,一刷新和输入地址都会被springboot的路由接管,报出error page.
当我们使用Vue开发时，一般会用到vue-router来作为前端路由，实现单页应用。vue-router提供了两种模式模拟一个完整的 URL：hash模式和history模式。
一、hash模式：使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
//查看id为1的文章
http://localhost:8888/#/view/1
二、history模式：URL 就像正常的 url，比较好看。
//查看id为1的文章
http://localhost:8888/view/1
那么 vue-router默认是使用hash模式的，不需要额外的配置，如果我们想使用history模式该如何配置呢？
前端：vue-router的mode: ‘history’
const router = new VueRouter({
mode: 'history',
routes: [...]
})
后端：我是使用SpringBoot，要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。详细看vue-router的官方文档。
SpringBoot默认匹配不到URL时，会返回一个默认的页面，所以可以配置一下默认的配置Bean。具体配置参考下面的地址：
里面介绍了三种写法：
1、第一种写法：实现ErrorPageRegistrar
@Configuration
public class ErrorConfigurar implements ErrorPageRegistrar {
@Override
public void registerErrorPages(ErrorPageRegistry registry) {
ErrorPage[] errorPages = new ErrorPage[2];
errorPages[0] = new ErrorPage(HttpStatus.NOT_FOUND, "/404.html");
errorPages[1] = new ErrorPage(HttpStatus.INTERNAL_SERVER_ERROR, "/500.html");
registry.addErrorPages(errorPages);
}
}
第二种写法：SpringBoot2.0之前的写法
@Bean
public EmbeddedServletContainerCustomizer containerCustomizer() {
return new EmbeddedServletContainerCustomizer() {
@Override
public void customize(ConfigurableEmbeddedServletContainer container) {
ErrorPage errorPage404 = new ErrorPage(HttpStatus.NOT_FOUND, "404.html");
container.addErrorPages(errorPage404);
}
};
}
第三种：SpringBoot2.0之后的写法
@Configuration
public class ErrorPageConfig {
/**
* SpringBoot2.0以上版本WebServerFactoryCustomizer代替之前版本的EmbeddedWebServerFactoryCustomizerAutoConfiguration
*
* @return
*/
//@Bean必须加上
@Bean
public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer() {
// //第一种：java7 常规写法
// return new WebServerFactoryCustomizer<ConfigurableWebServerFactory>() {
// @Override
// public void customize(ConfigurableWebServerFactory factory) {
// ErrorPage errorPage404 = new ErrorPage(HttpStatus.NOT_FOUND, "/404.html");
// factory.addErrorPages(errorPage404);
// }
// };
//第二种写法：java8 lambda写法
return (factory -> {
ErrorPage errorPage404 = new ErrorPage(HttpStatus.NOT_FOUND, "/404.html");
factory.addErrorPages(errorPage404);
});
}
}
参考地址：
网友评论