vue +spring boot 前后端分离项目 代码合并发布

需求

首先是有这么两个应用代码,前端是vue项目,后端是springboot 构建的服务端,因为这个项目很轻量级,完全没必要部署为两个应用,因此需要打包合并发布

步骤

第一步

新建环境配置文件,名称  .env.spring

在这里插入图片描述

第二步

在 package.json 新建 npm 脚本命令 :   "build_spring": "vue-cli-service build --mode spring"

在这里插入图片描述

第三步

执行 npm run build_spring  脚本命令.打包前端代码,并把dist中代码粘贴复制到springBoot项目中

在这里插入图片描述
在这里插入图片描述

第四步

打包 springBoot 代码成 jar 包,运行访问 http://[ip]:[端口号]/index.html,
由于我的项目本地运行且端口号为7700,故访问地址为:  http://localhost:7700/index.html

在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueSpring Boot是一对非常流行的前后端分离的开发框架。Vue是一个用于构建用户界面的JavaScript框架,而Spring Boot是一个用于构建Java应用程序的框架。 在VueSpring Boot的结合中,前端和后端的开发可以完全独立进行,各自负责不同的功能实现。前端开发者使用Vue来构建界面和处理用户交互,而后端开发者使用Spring Boot来处理业务逻辑和数据持久化。 在实战开发中,可以利用Vue的组件化和模块化特性,将页面拆分成多个独立的组件,每个组件负责不同的功能实现。同时,Vue提供了丰富的插件和工具,可以方便地进行前端开发,如Vue Router用于处理路由,Vuex用于管理应用状态等。 而Spring Boot则提供了Spring框架的强大功能,例如依赖注入、AOP、事务管理等。后端开发者可以使用Spring Boot来处理前端发送的请求,进行数据的验证、处理和存储等。同时,Spring Boot还可以与其他开源框架集成,如Spring Cloud用于构建分布式系统,MyBatis用于数据库操作等。 在实战开发中,可以使用webpack将Vue代码打包成静态资源,然后放到Spring Boot的静态资源目录中进行访问。同时,前端开发者也可以使用前端构建工具如npm或yarn来管理前端依赖。 总结来说,VueSpring Boot的结合可以实现前后端分离开发,提高开发效率和代码可维护性。使用VueSpring Boot的开发者可以分别专注于前端和后端的工作,提高开发效率。实战开发中,可以根据具体的业务需求选择适合的开发框架和工具,以实现更好的用户体验和系统性能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值