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";
    }
}
相关推荐
牢七21 小时前
mwf攻防。
java
不爱编程的小九九21 小时前
小九源码-springboot088-宾馆客房管理系统
java·开发语言·spring boot
抹香鲸之海1 天前
Prometheus+Grafana实现Springboot服务监控
spring boot·grafana·prometheus
Pluto_CSND1 天前
Java实现gRPC双向流通信
java·开发语言·单元测试
摇滚侠1 天前
Spring Boot 3零基础教程,WEB 开发 内嵌服务器底层源码分析 笔记48
spring boot·笔记
songx_991 天前
idea建有servlet类的web项目
java·servlet·intellij-idea
武子康1 天前
Java-154 深入浅出 MongoDB 用Java访问 MongoDB 数据库 从环境搭建到CRUD完整示例
java·数据库·分布式·sql·mongodb·性能优化·nosql
菜鸟una1 天前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
原来是猿1 天前
谈谈环境变量
java·开发语言
桃子不吃李子1 天前
nextTick的使用
前端·javascript·vue.js