前后端分离SpringMVC配置

场景

之前用到的前后端分离都是通过nginx进行代理与反向代理的方式。最近在公司做一些小型的内部使用的管理系统,vue+SpringBoot,vue使用history模式,在部署的时候希望除去nginx层。即tomcat既做为rest server也作为web static server。

1.静态文件位置

最简单的方式就是放入到classpath中,SpringMVC默认的几个resouce路径可以自行百度。然后流程就是:

  • vue: npm run build
  • cp vue dist to classpath
  • server run

启动成功,访问静态文件成功,但这样一个过程是有问题的,有点和前后端分离背道而驰,正所谓分久必合合久必分......当前端修改一点点东西,前端需要build服务端也需要跟着restart,那我们可以选择指定静态文件的路径。于是乎各种baidu google下搜到了可以通过继承WebMvcConfigurerAdapter重写addResourceHandlers来指定静态文件路径。
第一版大概长成这个样子:

   @Override
            public void addResourceHandlers(ResourceHandlerRegistry registry) {
                super.addResourceHandlers(registry);
                registry.addResourceHandler("/**").addResourceLocations("f:/static/");
            }

后来各种服务无响应,自信的认为是\/的问题,然后各种排列组合。嗯很明显失败了。。。
再后来看到配置classpath需要classpath:/xxx才想起来应该改成file:/f:/static/
嗯,果然是这样,然后将路径提取到配置文件。。。嗯没什么技术含量,但是是容易忽视的小坑。。。

    public WebMvcConfigurer webMvcConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedHeaders("*")
                        .allowedMethods("*")
                        .allowedOrigins("*");
            }
            @Override
            public void addResourceHandlers(ResourceHandlerRegistry registry) {
                super.addResourceHandlers(registry);
                registry.addResourceHandler("/**").addResourceLocations(webPath);//webPath="file:F:/workspace/static/"
            }
        };
    }
2.history模式 mvc的支持

vue中路由模式默认是hash,但是由于使用的是history模式,所以需要SpringMVC进行配置支持,很简单将所有的静态文件404都返回index.html。
SpringMVC最终配置:

@Configuration
public class WebConfiguration {
    @Value("${web.static.resource}")
    String webPath;
    @Bean
    public WebMvcConfigurer webMvcConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedHeaders("*")
                        .allowedMethods("*")
                        .allowedOrigins("*");
            }
            @Override
            public void addResourceHandlers(ResourceHandlerRegistry registry) {
                super.addResourceHandlers(registry);
                registry.addResourceHandler("/**").addResourceLocations(webPath);
            }
        };
    }
    @Bean
    public EmbeddedServletContainerCustomizer containerCustomizer() {

        return container -> {

            //Vue 配置
            ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");

            container.addErrorPages(error404Page);
        };
    }

}
web.static.resource: file:F:/workspace/static/
SpringMVC对静态文件的缓存

目前设置关闭缓存,后期添加文件hash判读。

总结

内容很简单,没什么可总结的······当个备忘录。。。

推荐阅读更多精彩内容