spring-boot 集成 vue history模式

深坑

当我们使用 Vue/react 开发时,会用到 vue-route/react-route 来作为前端路由实现单页应用,路由提供了两种模式模拟一个完整的 URL(hash模式和history)模式。

hash模式:使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时页面不会重新加载

http://localhost:8888/#view/1

history模式: URL就像正常的 url 比较好看。

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 依赖的页面,

SpringBoot默认匹配不到 URL 时,会返回一个默认的页面,所以需要配置一下默认的配置Bean。

/** * @author Y.Jer * @Create 2019-10-16 16:49 * @Descript 自定义错误页面, 主要是为了解决前端是单页应用架构和 spring boot 结合一起部署时,刷新页面会出现404问题。 */ @Configuration public class ErrorPageConfig { /** * SpringBoot 2.0 以上版本 WebServerFactoryCustomizer 代替之前版本的 EmbeddedWebServerFactoryCustomizerAutoConfiguration */ @Bean public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer() { // // 第一种:java7 常规写法 // return new WebServerFactoryCustomizer<ConfigurableWebServerFactory>() { // @Override // public void customize(ConfigurableWebServerFactory factory) { // ErrorPage errorPage404 = new ErrorPage(HttpStatus.NOT_FOUND, "/client/dist/index.html"); // factory.addErrorPages(errorPage404); // } // 第二种写法: java8 lamba 写法 return (factory -> { // 路径以 resources/public 为根路径 ErrorPage errorPage = new ErrorPage(HttpStatus.NOT_FOUND, "/client/dist/index.html"); factory.addErrorPages(errorPage); }); } }

这样就可以使用 vue 的 history 模式。