springboot集成vue项目，去掉访问路径中的#

问题描述：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模式。

1. hash模式：使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

// 查看id为1的文章

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

2. 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。具体配置参考下面内容（三种写法）：

• 第一种写法：实现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);
        });
    }
}

参考地址：
vue-router路由使用 history 模式时，后端SpringBoot如何配置
SpringBoot2.0实现自定义404页面渲染