Spring Boot 引入 thymeleaf

原创已于 2023-02-25 12:42:46 修改 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #vue.js #前端

于 2023-02-25 12:11:01 首次发布

后端专栏收录该内容

21 篇文章

订阅专栏

文章详细介绍了如何将Vue打包的dist内容整合到SpringBoot项目中，包括引入thymeleaf依赖，配置static和templates文件夹，创建WebMvcConfig，以及设置application.yml中的静态资源路径。

这里以 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/#