Springboot项目与vue项目整合打包的实例操作方法
- 更新时间:2020-07-07 10:26:02
- 编辑:赵虹影
参考资料
- 《Vue.js+Node.js开发实战:从入门到项目上线》配书资源 配套资源 / 10.25 MB / 张帆 推荐度:
- Node.js实战:使用Egg.js+Vue.js+Docker构建渐进式、可持续集成与交付应用 PDF 电子书 / 227 MB / yugo 推荐度:
- 《Vue.js前端开发基础与项目实战》项目源码 配套资源 / 741 MB / 郑韩京 推荐度:
- 前端工程师必备技能:Vue移动开发实战技巧 PDF 电子书 / 122 MB / 李利德 推荐度:
- 《Node.js+Express+Vue.js项目开发实战》源码 配套资源 / 3.6 MB / 张旭 推荐度:
正文内容
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中为:
<plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>exec-maven-plugin</artifactId> <executions> <execution> <id>exec-cnpm-install</id> <phase>prepare-package</phase> <goals> <goal>exec</goal> </goals> <configuration> <executable>${cnpm}</executable> <arguments> <argument>install</argument> </arguments> <workingDirectory>${basedir}/src/main/webapp</workingDirectory> </configuration> </execution> <execution> <id>exec-cnpm-run-build</id> <phase>prepare-package</phase> <goals> <goal>exec</goal> </goals> <configuration> <executable>${cnpm}</executable> <arguments> <argument>run</argument> <argument>build</argument> </arguments> <workingDirectory>${basedir}/src/main/webapp</workingDirectory> </configuration> </execution> </executions> </plugin>
然后maven-resources-plugin
插件将项目的前端文件打包到boot项目的classes中,具体的请参考pom.xml中的,
将webapp/dist文件夹中的文件复制到src/main/resources/static
中,并打包到classes
<!--copy文件到指定目录下 --> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-resources-plugin</artifactId> <configuration> <encoding>${project.build.sourceEncoding}</encoding> </configuration> <executions> <execution> <id>copy-spring-boot-webapp</id> <!-- here the phase you need --> <phase>validate</phase> <goals> <goal>copy-resources</goal> </goals> <configuration> <encoding>utf-8</encoding> <outputDirectory>${basedir}/src/main/resources/static</outputDirectory> <resources> <resource> <directory>${basedir}/src/main/webapp/dist</directory> </resource> </resources> </configuration> </execution> </executions> </plugin>
然后通过maven命令:
mvn clean package -P window
打包成功后我们的前端项目就整个的打包到了boot项目的jar包中,然后启动项目,访问index.html页面就看到了项目启动成功。
打出来的jar包中如果static说明打包由于种种原因失败了,我就遇到过几次,这时候需要再来一次 mvn clean package -P window
ps:下面看下SprintBoot 整合vue实现上传下载
这里记录一下在Springboot中实现文件上传下载的核心代码
package com.file.demo.springbootfile; import com.file.util.ResultUtil; import org.apache.commons.lang.exception.ExceptionUtils; import org.apache.tomcat.util.http.fileupload.IOUtils; import org.apache.tomcat.util.http.fileupload.util.Streams; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.*; /* * springboot整合vue,文件上传下载 * */ //上传不要用@Controller,用@RestController @RestController @RequestMapping("/file") public class FileController { private static final Logger logger = LoggerFactory.getLogger(FileController.class); //在文件中,不用/或者\最好,推荐使用File.separator private final static String fileDir="files"; private final static String rootPath = System.getProperty("user.home")+ File.separator+fileDir+File.separator; /* * 文件上传 * */ @RequestMapping("/upload") public Object uploadFile(@RequestParam("file")MultipartFile[] multipartFiles, final HttpServletResponse response, final HttpServletRequest request){ File fileDir = new File(rootPath); /* * exists():测试此抽象路径名表示的文件是否存在 * isDirectory():检查一个对象是否是文件夹 * isFile():判断是否为文件,也可能是文件目录 * */ if(!fileDir.exists() && !fileDir.isDirectory()){ //检查到文件不存在则创建 fileDir.mkdir();//创建文件,一级 fileDir.mkdirs();//创建多级 } try{ if(multipartFiles != null && multipartFiles.length > 0){ for ( int i = 0;i<multipartFiles.length;i++){ try{ String storagePath = rootPath+multipartFiles[i].getOriginalFilename(); logger.info("上传的文件:" + multipartFiles[i].getName()+","+multipartFiles[i].getContentType()+"," +multipartFiles[i].getOriginalFilename() + ",保持的路径为:" + storagePath); Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true); }catch (IOException e){ logger.info(ExceptionUtils.getFullStackTrace(e)); } } } }catch (Exception e){ return ResultUtil.error(e.getMessage()); } return ResultUtil.success("上传成功!"); } /* * 文件下载 * */ @RequestMapping("/download") public Object downkiadFile(@RequestParam String fileName,final HttpServletResponse response,final HttpServletRequest request){ OutputStream os = null; InputStream is = null; try{ //获取输出流rootPath os = response.getOutputStream(); //重置输出流 response.reset(); response.setContentType("application/x-download;charset=GBK"); response.setHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("utf-8"), "iso-8859-1")); //读取流 File f= new File(rootPath+fileName); is = new FileInputStream(f); if(is == null){ logger.error("下载文件失败,请检查文件“"+ fileName +"”是否存在"); return ResultUtil.error("下载附件失败,请检查文件“" + fileName + "”是否存在"); } //复制文件 IOUtils.copy(is,response.getOutputStream()); //刷新缓冲 response.getOutputStream().flush(); }catch (IOException e){ return ResultUtil.error("下载文件失败,error:" + e.getMessage()); } //文件的关闭在finally中执行 finally { { try { if(is != null){ is.close(); } }catch (IOException e){ logger.error(ExceptionUtils.getFullStackTrace(e)); } try{ if(os != null){ os.close(); } }catch (IOException e){ logger.info(ExceptionUtils.getFullStackTrace(e)); } } } return null; } }
源码下载地址: https://github.com/struggle0903/SpringBootfiledemo.git
总结
以上所述是小编给大家介绍的Springboot项目与vue项目整合打包的实现方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关教程
-
分享springboot打包不同环境配置和shell脚本部署
这篇文章主要给大家介绍了关于springboot打包不同环境配置以及shell脚本部署的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用springboot具有一定的参考学习价值,需要的朋
发布时间:2020-02-10
-
Spring Boot打包war jar并部署tomcat实例步骤
这篇文章主要介绍了Spring Boot打包war jar 部署tomcat的相关资料,需要的朋友可以参考下
发布时间:2020-06-12
-
Spring boot项目打包成ja的简单方法
这篇文章主要给大家介绍了关于Spring boot项目打包成jar运行的二种方法,文中通过示例代码介绍的非常详细,对大家学习或者使用spring boot具有一定的参考学习价值,需要的朋友们下面随着小编
发布时间:2019-09-10
-
用Cordova打包Vue项目的方法步骤
这篇文章主要介绍了教你用Cordova打包Vue项目的方法,详细的介绍了如何Vue项目打包成app,具有一定的参考价值,有兴趣的可以了解一下
发布时间:2020-02-18
-
分析vue-cli脚手架打包静态资源请求出错的原因与解决方法
这篇文章主要给大家介绍了关于vue-cli脚手架打包静态资源请求出错的原因与解决方法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue-cli具有一定的参考学习价值,需要的朋友们下
发布时间:2020-04-10
-
vue项目打包后通过百度的BAE发布到网上流程步骤
这篇文章主要介绍了将vue的项目打包后通过百度的BAE发布到网上的流程,主要运用的技术是vue+express+git+百度的应用引擎BAE。需要的朋友可以参考下
发布时间:2019-08-02
-
vue打包后生成一个配置文件修改接口的实例内容
这篇文章主要介绍了vue打包之后生成一个配置文件修改接口 的相关资料,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
发布时间:2019-12-16
-
深入浅出Spring Boot 2.x
spring boot 2实战精髓 企业级应用开发实战 微服务实战指南 结合主流持久层框架MyBatis 讲述企业级Spring Boot开发要点 赠送作者讲解的部分配套视频课程
大小:257.67 MBSpring Boot电子书
-
Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统
本书从项目实践出发,手把手、心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术。 全书分为三篇共32章。第一篇为系统介绍篇,对系统的功能、架构和界面进行介绍,对系统的安装运行给出指南,对涉及的关键技术进行简单介绍。第二篇为后端实现篇,从数据库设计和搭建开发环境开始,全面细致地讲解权限管理系统的后端实现全过程。第三篇为前端实现
大小:132979 MB 项目实战
-
一步一步学Spring Boot 2
本书主要内容包括Spring Boot环境搭建、Spring Boot常用标签、Spring Boot集成Redis、数据库MySQL、Spring Data、日志Log4J、Thymeleaf模板引擎、ActiveMQ消息、MyBatis等流行技术,以及利用Spring Boot实现邮件发送、Quartz定时器、过滤器Filter和监听器Listener等。
大小:72.04 MBSpring Boot电子书
-
微服务实战(Dubbox+Spring Boot+Docker)
在这个凡事皆互联的时代,越来越多的人和物成为互联网上的节点,不断扩充着互联网这张大网的边界。节点即价值,更多的节点意味着更大的价值。
大小:90.8 MB微服务电子书
-
Spring Boot 企业级应用开发实战
《Spring Boot 企业级应用开发实战》 围绕如何整合以 Spring Boot 为核心的技术栈,来实现一个完整的企业级博客系统 NewStarBlog 而展开。该博客系统支持市面上博客系统的常见功能。读者朋友可以
大小:419 MBSpring Boot电子书