springboot和vue结合的方案网络上的主要有以下两种:
1。【不推荐】在html中直接使用脚本标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue的双向数据绑定,这种方式只适合于普通的全栈开发。
2。【推荐】使用vue官方的脚手架创建单独的前端工程项目,做到和后端完全独立开发和部署,后端单独部署一个纯restful的服务,而前端直接采用nginx来部署,这种称为完全的前后端分离架构开发模式,但是在分离中有很多api权限的问题需要解决,包括部署后的vue路由器路由需要在nginx中配置重写规则。这种前后端完全分离的架构也是目前互联网公司所采用的,后端服务器不再需要处理静态资源,也能减少后端服务器一些压力。
在传统行业中很多是以项目思想来主导的,而不是产品,一个项目会卖给很多的客户,并且部署到客户本地的机房里。在一些传统行业里面,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定的环境也无法做到自动构建,容器化部署等。因此在这种情况下尽量减少部署时的服务软件需求,打出的包数量也尽量少。针对这种情况这里采用的在开发中做到前后端独立开发,整个开发方式和上面提到的第二种方式是相同的,但是在后端springboot打包发布时将前端的构建输出一起打入,最后只需部署springboot的项目即可,无需再安装nginx服务器。
实际上本文中这种前后端分离的开发,前端开发好后将建立构建好的dist下静态中的文件拷贝到springboot的资源的静态下,index . html则直接拷贝到springboot的资源的静态下。下面是示例图:
vue前端项目
@ configuration
公开课SpringWebMvcConfig延伸WebMvcConfigurerAdapter {
@Override
公共空间addResourceHandlers (ResourceHandlerRegistry注册表){
registry.addResourceHandler(“/静态/* *”).addResourceLocations(“类路径:/静态/?;
super.addResourceHandlers(注册表);
}
}
解决第二个问题的方式是对vue的路由的路径做改写,交给路由器来处理,而不是springboot自己处理,重写时可以考虑路由的路径统一增加后最,然后在springboot中编写过滤拦截特定后缀来做请求转发交给vue的路由处理。如:
后端拦截到带有vhtml的都交给路由器来处理,这种方式在后端写过滤器拦截后打包是完全可行的,但是前端开发的直接访问带后缀的路径会有问题。
另外一种方式是给前端的路由路径统一加个前缀比如/ui,这时后端写过滤器匹配该前缀,也不会影响前端单独开发是的路由解析问题。过滤器参考如下:
