【第4期】springboot: Springboot整合打包vue项目

      由于公司项目采用的是前后端分离开发，后端springboot,前端vue。正常情况下前后端分别打包部署即可，vue一般部署在nginx下，但是有时尽量减少部署时的服务软件需求，打出的包数量也尽量少，可以将vue整合在springboot项目中，由springboot自带的tomcat来运行，更多详细内容在公众号“村中一少”中有介绍。

      这里介绍下手动打包的情况

一、vue打包

1、前端工具我用的Visual Studio Code这个工具，在终端执行命令npm run build，执行成功后，可以看到目录中生成了dist文件夹

2、另外，也可以把vue项目引入作为springboot的一个子模块，在ideal编辑器的terminal中也能打包vue项目，前提是你已经安装了nodejs。

二、springboot整合

1、在后端项目的resources 目录下创建文件夹static, 把vue项目dist目录下的文件全部copy到static下。启动springboot项目即可。

2、由于vue项目打包后没有端口（部署在nginx中则使用nginx的端口，部署在tomcat则使用tomcat端口），所以与后端项目使用同一个端口，这里后端项目我用的8103端口，启动后端项目成功后，浏览器中输入http://localhost:8103，回车即可。

3 、thymeleaf依赖是否引入？

<dependency>      <groupId>org.springframework.boot</groupId>      <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>

参考网上的资料，有的引入了，有的则没有，我亲自测试了下，不引入的话项目也可以运行起来。