Spring Boot + Vue 前后端合一

背景

随着微服务的火爆，前后端分离成为必由之路

在微服务架构下，各个微服务是不会独立对外提供服务的 ,因为各微服务之间需要相互访问，访问是不会有权限校验的，一旦对外发布……，整个微服务集群通过Gateway(微服务之一)对外提供服务、进行路由以及鉴权，这也使得前端必然和后端分离，因为前端是必定要对外能访问的

痛点

对于一些大型项目来说，前后端分离、微服务架构，无可厚非，但实际上可能根本没有必要，大家只是觉得不用微服务岂不是落伍了，盲目的从众心理吧；但对于一些小型的项目而言，那是真的完全不需要了，比如，就是一个简单的人员管理系统，这个系统毫不复杂，该怎么技术选型？后端Java技术栈Spring Boot没跑了，前端呢？jsp(远古技术)?thymeleaf(中世纪技术)？纯html(效率低下)?还是要回归到Vue之类的前端框架，而且现在很多初级前端开发只会框架……，那么问题来了，做这么一个小项目也要前后端分离，前后端各自单独发布？

解决方案

对于这种小项目而言，还是希望维护一套，问前端开发能不能整合，没一个能说出个所以然，只好自己学习Vue了……
以下列出目录和关键代码，由于我Vue水平有限，不会修改Vue的目录结构，这版目录结构不是特别清晰，仅提供思路，后续Vue水平提高了再修改

• 根目录
  
  这是项目跟目录，红框圈出的为java相关代码，其他大多都是前端项目文件，前端项目参照(vue-element-admin),就是直接把前端项目根目录拷贝到了springboot项目下，本来是想把前端项目整合到一个文件夹下的，可是搞了半天没成功，只能先这样了……
• SRC目录
  
  除了main其他都是前端项目，main下全是java了
• 最关键的配置
  
  static-path-pattern:spring映射静态资源路径，/**把静态资源映射到根目录；
  static-locations:静态文件位置，把前端项目的发布目录作为前端资源；

大功告成

运行

• 前端
  前端开发拿到项目完全可以把它当作前端项目来开发，毫不影响

npm i //安装依赖,别把依赖提交git
npm run dev//运行
npm run build:dev //构建

• 后端
  后端也完全可以把它当作一个纯粹后端项目跑，Spring Boot项目启动我就不赘述了
• 联调
  其实跟前后端分离的联调一样，唯一的好处就是，前端开发运行npm build:dev（dev是开发环境，该命令根据情况修改）之后，dist目录下会生成前端项目构建后的文件，vue最后产出的还是html和js没啥特殊的，把dist提交后(svn或git)，后端程序员更新代码，启动项目即可访问前端页面，进行前后端联调

发版

前后端各自打包，把dist目录放在jar包相同目录下即可，当然也可以前后端分开发……
以下Dockerfile为项目制作docker镜像方法

FROM java:8
LABEL maintainer=xxx
WORKDIR /app
ARG JAR_FILE=xxx-1.0-SNAPSHOT.jar   //java包名
COPY ./target/${JAR_FILE} /app/app.jar
COPY ./dist /app/dist
EXPOSE 8080
CMD java -jar app.jar

如果项目很大，建议另起目录创建docker镜像
本文仅提供一种思路，大家可以自行发散，比如把dist直接放在jar包里，当然这样不利于前端代码更新
如需转载请注明地址，谢谢~~