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";
    }
}

  • 13
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SpringBoot是一种基于Spring框架的快速开发Web应用程序的工具。而Vue是一种用于构建用户界面的渐进式JavaScript框架。将SpringBootVue结合起来,可以轻松构建现代化的Web应用程序。 下面是SpringBoot整合Vue的执行过程: 1. 创建一个SpringBoot项目:可以使用Spring Initializr或者手动创建一个Maven项目。在pom.xml添加SpringBootVue的依赖。 2. 创建Vue项目:使用Vue的脚手架工具创建一个Vue项目。可以使用命令行或者Vue的GUI工具来创建。 3. 配置Vue项目:在Vue项目,需要将API请求代理到SpringBoot服务器。在vue.config.js文件添加以下代码: ``` module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', ws: true, changeOrigin: true } } } } ``` 这段代码告诉Vue的开发服务器将所有以/api开头的请求代理到SpringBoot服务器的8080端口。 4. 编写代码:在Vue项目,可以使用axios或者其他HTTP客户端库来发送API请求。在SpringBoot项目,需要编写控制器和服务来处理这些请求。 5. 打包并运行:在Vue项目,使用npm run build命令打包项目。将生成的dist目录的内容复制到SpringBoot项目的src/main/resources/static目录下。在SpringBoot项目,使用mvn spring-boot:run命令运行应用程序。 6. 访问应用程序:在浏览器访问http://localhost:8080即可访问应用程序。 以上就是SpringBoot整合Vue的执行过程。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值