Spring Boot 引入 thymeleaf

这里以 vue打包的dist为例

---

第一步，首先将vue项目打包至dist文件夹（若开发者不熟悉vue前端，直接将此项任务交给前端，让他传给你dist）

如图所示，npm run build 是打包命令，打包完成后便会生成一个 dist 文件夹

---

第二步，在springboot项目 pom.xml文件中引入thymeleaf依赖

        代码如下： 

        <!--依赖web相关模块-->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<!--thymeleaf模板-->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
			<version>2.1.6.RELEASE</version>
		</dependency>

---

第三步，在 resources文件夹下 创建两个文件夹，一个命名为 static，一个命名为 templates。

 static里面放dist文件夹的东西（就是vue打包之后的东西，css和js文件以及html都在里面）（注意static里面放的不是dist文件夹，而是dist里面的那些文件）

        templates里面放的就是初始页面的文件，如我的就是index.html

---

第四步，配置WebMvcConfig。

        在java下创建config包，并在包内创建WebMvcConfig配置类

         代码如下：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/#").setViewName("index");
    }

}

---

第五步，配置application.yml

         代码如下：（注意web配置在spring之下，static-locations配置就是访问静态文件的位置）

spring:
  web:
    resources:
      static-locations: classpath:/static

---

第六步，启动springboot

       相信这一步所有程序员都会的，这里就不展示了。

---

第七步，访问页面。

        在第四步中，我配置的访问路径是 /# ， springboot端口是8081

        那么我的页面访问路径就是         http://localhost:8081/#