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文件夹,然后将前端项目的源文件复制到该文件夹下,具体结构如图:
然后使用maven命令执行本地node打包命令,这样就可以 在执行mvn clean package命令时,利用maven插件执行cnpm run build命令(我是使用的淘宝的镜像cnpm,国外的npm命令会相对慢一些,大家根据自己的条件选择,具体命令请看项目中前端vue文件的README.md),一次性完成整个过程
实现方法是这样的,我们要引入org.codehaus.mojo插件来进行maven调用node命令,pom.xml中为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
|
然后maven-resources-plugin插件将项目的前端文件打包到boot项目的classes中,具体的请参考pom.xml中的,
将webapp/dist文件夹中的文件复制到src/main/resources/static中,并打包到classes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
然后通过maven命令:
1 |
|
打包成功后我们的前端项目就整个的打包到了boot项目的jar包中,然后启动项目,访问index.html页面就看到了项目启动成功。
打出来的jar包中如果static说明打包由于种种原因失败了,我就遇到过几次,这时候需要再来一次 mvn clean package -P window
Springboot项目与vue项目整合打包相关推荐
- 将springboot项目和vue项目部署到windows 2016 server(服务器)
将springboot项目和vue项目部署到服务器 1.服务器环境配置 1.1 服务器需要安装的环境 1.2 服务器需要配置的入站与进站规则 2.springboot项目的打包 2.1 springb ...
- ssm项目直接加html文件,如何把ssm项目和vue项目部署在云服务器(上)
如何把ssm项目和vue项目部署在云服务器(上) 如何把ssm项目和vue项目部署在云服务器(上) 一.引入 URL的概念理解 在WWW上,每一信息资源都有统一的且在网上唯一的地址,该地址就叫URL( ...
- springboot项目部署 + vue项目部署
部署一个简单的前后端分离的博客项目 springboot项目部署 第一步:打包springboot项目(jar包) 第二步:将jar(项目的target目录下)包上传到云服务器上(Xftp) 第三步: ...
- node服务器放vue项目,本地Vue项目跨域请求本地Node.js服务器的配置方法
前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...
- vue项目html,Vue项目接口.html
Vue项目接口 电商管理后台API接口文档 接口说明 接口基准地址:http://localhost:8888/api/private/v1/ 服务端已开启 CORS 跨域支持 API V1 认证统一 ...
- dajngo3,vue3前端项目搭建,vue项目结构的介绍
前端项目搭建 查看当前node版本 [dalaojun@localhost django_luichun]$ node -v v14.15.0 查看npm版本 [dalaojun@localhost ...
- IDEA中创建启动Vue项目--搭建vue项目
文章目录 环境配置 安装Vue-cli构建工具 构建项目 使用命令启动Vue项目 使用idea启动Vue项目 环境配置 下载安装nodeJs 成功安装国内镜像或者是淘宝的npm镜像 详情见博客:Nod ...
- 创建vue项目,vue项目自定义配置
对于新手来说配置vue项目的各个插件时,总是会出现插件版本和vue框架版本适配问题.这篇文章简单的讲一下vue创建项目时自定义项目插件的配置. 首先我们想要在桌面创建一个新的vue项目. 首先我们找到 ...
- 【vue项目】vue项目创建全流程,创建使用 vue-cli 搭建项目
一. 使用 vue-cli 搭建项目 1.安装vue/cli ,执行下面的命令安装或是升级 npm i -g @vue/cli npm i -g @vue/cli 安装报错 如果安装报错如下 np ...
最新文章
- 算法导论-MIT笔记
- 七牛云 直播 java_七牛云直播SDK之推流解析
- 分布式理论:CAP理论
- 《需求工程——软件建模与分析》阅读笔记二
- 关于Android软件更新
- linux中call命令,各种linux命令(pwn)
- Java 源码--Arrays
- java计算棋盘上的麦粒
- 人工智能算法:遗传算法
- wps里的茶色字体怎么设置_如何添加WPS字体 - 卡饭网
- mrpoid模拟器java版_mrpoid模拟器2019下载
- oracle lob值是什么,oracle LOB介绍
- android Glide 去掉绿色背景(图片变绿解决方法)
- python 模仿excel中的‘删除重复项’功能,根据某行删除二维数组的重复项,但不使用drop_duplicates’函数实现
- 电商后台管理系统订单列表模块
- 深度学习(3):基于人脸的性别和年龄判断
- Linux中最重要的命令
- 面试中常见线程的50个问题
- 关于zip包解压之后文件打开出现文件损坏的问题
- jimu Mirror,加速你的 Android UI 开发
热门文章
- PDF 补丁丁 0.4.1.688 测试版发布(请务必用其替换 682 测试版)
- iphone-common-codes-ccteam源代码 CCUINavigationBar.h
- MySQL两个字段都建立索引 使用情况
- Mellanox CX-5网卡支持OVS流表加速功能的调研
- Kubernetes学习笔记之Calico Startup源码解析
- C语言模拟顺序栈的创建、入栈、出栈操作
- 数据结构与算法--Tree(二叉树、B±树、红黑树)
- java中的gridy_JAVA格局管教器.
- jq双击放大图片_痘痘肌肤反馈图片,平时注意这3个就可以
- 如何看CentOS系统是32位还是64位的?