将vue打包项目集成到springboot项目中 使用thymeleaf模板实现后端启动直接调试接口

vue打包项目并集成到springboot项目中

最近在研究，怎么把前后端分离的项目整合到一个包中，达到部署最简化的过程，于是乎研究把vue打包的项目集成到springboot项目中，这样就在打包springboot项目的时候就直接把前段的静态页面都携带进去了，部署就只需要启动一个jar包就可以实现页面访问及数据调取了。现在把自己的研究成果展示一下，希望能帮助有需要的人。

部署简单说明

本人使用的webstorm进行前端页面的开发，页面开发好以后，将项目打包，然后将目录dist下的statrc及index.html文件拷贝到springboot下resources下。如图及说明：
1、打包vue项目：命令，npm run build
打包好的项目如图：

2、将打包好的项目拷贝到springboot项目下，如图：

（这里需要注意的是，springboot项目resources目录下是没有static及templates文件夹的，在拷贝之前需要自己手动创建一下）。

3、以上步骤就已经把vue项目集成到springboot项目中了，接下来是怎么在springboot项目是使用集成的vue静态页面。

4、在yml文件下增加thymeleaf模板配置，如下

spring:
  #thymeleaf模板配置
  thymeleaf:
    cache: false                   # 这个开发配置为false，避免改了模板还要重启服务器
    prefix: classpath:/templates/  #模板文件视图前缀，默认是classpath:/templates/，可不用配置
    suffix: .html                  #模板文件视图后缀，默认是.html，可不用配置
    check-template-location: true  #检查模板位置，可不用配置
    encoding: utf-8                #编码字符集，默认为utf-8，可不用配置
    servlet:
      content-type: text/html	   #模板的内容类型，默认为text/html，可不用配置
  mvc:
    static-path-pattern: /static/**

5、在pom文件中添加thymeleaf依赖，如下：

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

6、启动项目，直接访问当前yml文件中配置的端口号，我的是8989。
http://localhost:8989

7、以上是我把前端项目打包后集成到springboot中的全过程，希望能对需要的人有用。同时也是为自己做个笔记，在整理的过程中来加固一下，欢迎大家指出问题，共同进步。