springboot整合vue,将vue项目整合到springboot项目中

将vue项目打包后,与springboot项目整合。

第一步,使用springboot中的thymeleaf模板引擎

导入依赖

复制代码
        <!-- thymeleaf 模板 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

在resources目录下建立static文件夹和templates文件夹

在yml中配置thymeleaf

复制代码
spring:
  # 模板引擎
  thymeleaf:
    mode: HTML5
    encoding: utf-8
    # 禁用缓存
    cache: false

在配置中打开访问静态文件的权限

复制代码
public class ResourceConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
    }
}

第二步:将vue项目打包后中的静态文件放入static文件夹中,将index.html放入templates文件夹中

第三步:在controller中写路由,让其跳转index.html页面

复制代码
@Controller
@CrossOrigin
public class IndexController {
    @GetMapping("/")
    public String index(){
        return "index";
    }
}
相关推荐
JavaGuide6 分钟前
JDK 25(长期支持版) 发布,新特性解读!
java·后端
用户3721574261357 分钟前
Java 轻松批量替换 Word 文档文字内容
java
白鲸开源8 分钟前
教你数分钟内创建并运行一个 DolphinScheduler Workflow!
java
我是日安35 分钟前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
DevUI团队43 分钟前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好1 小时前
pinia从定义到运用
前端·vue.js
代码小学僧1 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
Java中文社群1 小时前
有点意思!Java8后最有用新特性排行榜!
java·后端·面试
代码匠心1 小时前
从零开始学Flink:数据源
java·大数据·后端·flink
间彧1 小时前
Spring Boot项目中如何自定义线程池
java