Springboot项目与vue项目整合打包的实现方式_springvue合并部署,springboot项目与vue项目整合打包 - CSDN文库

175 浏览量更新于2023-05-12 评论 3 收藏 105KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Springboot项目与项目与vue项目整合打包的实现方式项目整合打包的实现方式

主要介绍了Springboot项目与vue项目整合打包的实现方式,本文通过两种方式给大家介绍的非常详细，具有一定

的参考借鉴价值，需要的朋友可以参考下

我的环境我的环境

* JDK 1.8

* maven 3.6.0

* node环境

1.为什么需要前后端项目开发时分离，部署时合并？为什么需要前后端项目开发时分离，部署时合并？

在一些公司，部署实施人员的技术无法和互联网公司的运维团队相比，由于各种不定的环境也无法做到自动构建，容器化部署

等。因此在这种情况下尽量减少部署时的服务软件需求，打出的包数量也尽量少。针对这种情况这里采用的在开发中做到前后

端独立开发，打包时在后端springboot打包发布时将前端的构建输出一起打入，最后只需部署springboot的项目即可，无需再

安装nginx服务器

在这里我有两种方式，一种是简单的，一种是复杂的，下边先来看一个简单的例子：

1）前端开发好后将build构建好的dist下的文件拷贝到springboot的resources的static下（boot项目默认没有static，需要自己新

建）

操作步骤：前端vue项目使用命令 npm run build 或者 cnpm run build 打包生成dist文件，在springboot项目中resources下建立static

文件夹，将dist文件中的文件复制到static中，然后去application中跑起来boot项目，这样直接访问index.html就可以访问到页

面（api接口请求地址自己根据情况打包时配置或者在生成的dist文件中config文件夹中的index.js中配置）

项目结构如图：

鼠标选中的这几个就是从dist文件中复制过来的前端的包，然后我们直接启动boot项目就可以通过index.html访问了（ps：上

面这是最简单的合并方式，但是如果作为工程级的项目开发，并不推荐使用手工合并，也不推荐将前端代码构建后提交到

springboot的resouce下，好的方式应该是保持前后端完全独立开发代码，项目代码互不影响，借助jenkins这样的构建工具在

构建springboot时触发前端构建并编写自动化脚本将前端webpack构建好的资源拷贝到springboot下再进行jar的打包，最后就

得到了一个完全包含前后端的springboot项目了。不过上述方法操作简单，便于使用，如果想一次性打包完成的话，就看第二

种）

2：第二种方法是在src/main下建立一个webapp文件夹，然后将前端项目的源文件复制到该文件夹下，具体结构如图：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

weixin_38570278

粉丝: 4
资源: 980

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈