如何整合打包Springboot与vue项目

  • 时间:
  • 浏览:171
  • 来源:恰卡网

导读这期内容当中小编将会给大家带来有关如何整合打包Springboot与vue项目,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。 环境 * JDK 1.8* maven 3.6.0* node环...

这期内容当中小编将会给大家带来有关如何整合打包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中配置)

项目结构如图:

然后使用maven命令执行本地node打包命令,这样就可以 在执行mvn clean package命令时,利用maven插件执行cnpm run build命令(我是使用的淘宝的镜像cnpm,国外的npm命令会相对慢一些,大家根据自己的条件选择,具体命令请看项目中前端vue文件的README.md),一次性完成整个过程

实现方法是这样的,我们要引入org.codehaus.mojo插件来进行maven调用node命令,pom.xml中为:


org.codehaus.mojo
exec-maven-plugin


exec-cnpm-install
prepare-package

exec


${cnpm}

install

${basedir}/src/main/webapp



exec-cnpm-run-build
prepare-package

exec


${cnpm}

run
build

${basedir}/src/main/webapp



然后maven-resources-plugin插件将项目的前端文件打包到boot项目的classes中,具体的请参考pom.xml中的,

将webapp/dist文件夹中的文件复制到src/main/resources/static中,并打包到classes



org.apache.maven.plugins
maven-resources-plugin

${project.build.sourceEncoding}



copy-spring-boot-webapp

validate

copy-resources


utf-8
${basedir}/src/main/resources/static


${basedir}/src/main/webapp/dist





然后通过maven命令:

mvn clean package -P window 

打包成功后我们的前端项目就整个的打包到了boot项目的jar包中,然后启动项目,访问index.html页面就看到了项目启动成功。

打出来的jar包中如果static说明打包由于种种原因失败了,我就遇到过几次,这时候需要再来一次 mvn clean package -P window

ps:下面看下SprintBoot 整合vue实现上传下载

这里记录一下在Springboot中实现文件上传下载的核心代码

packagecom.file.demo.springbootfile;
importcom.file.util.ResultUtil;
importorg.apache.commons.lang.exception.ExceptionUtils;
importorg.apache.tomcat.util.http.fileupload.IOUtils;
importorg.apache.tomcat.util.http.fileupload.util.Streams;
importorg.slf4j.Logger;
importorg.slf4j.LoggerFactory;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.RequestParam;
importorg.springframework.web.bind.annotation.RestController;
importorg.springframework.web.multipart.MultipartFile;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjava.io.*;
/*
*springboot整合vue,文件上传下载
**/
//上传不要用@Controller,用@RestController
@RestController
@RequestMapping("/file")
publicclassFileController{
privatestaticfinalLoggerlogger=LoggerFactory.getLogger(FileController.class);
//在文件中,不用/或者\最好,推荐使用File.separator
privatefinalstaticStringfileDir="files";
privatefinalstaticStringrootPath=System.getProperty("user.home")+File.separator+fileDir+File.separator;
/*
*文件上传
**/
@RequestMapping("/upload")
publicObjectuploadFile(@RequestParam("file")MultipartFile[]multipartFiles,finalHttpServletResponseresponse,finalHttpServletRequestrequest){
FilefileDir=newFile(rootPath);
/*
*exists():测试此抽象路径名表示的文件是否存在
*isDirectory():检查一个对象是否是文件夹
*isFile():判断是否为文件,也可能是文件目录
**/
if(!fileDir.exists()&&!fileDir.isDirectory()){
//检查到文件不存在则创建
fileDir.mkdir();//创建文件,一级
fileDir.mkdirs();//创建多级
}
try{
if(multipartFiles!=null&&multipartFiles.length>0){
for(inti=0;i

上述就是小编为大家分享的如何整合打包Springboot与vue项目了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注恰卡网行业资讯频道。

猜你喜欢

accesstoken中怎么获取用户黑名单列表

这篇文章将为大家详细讲解有关accesstoken中怎么获取用户黑名单列表,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。 公众号可登录

2021-07-29

Java中怎么利用轮询获取线程返回数据

Java中怎么利用轮询获取线程返回数据,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。 1. 多线程的特点 一般程序中

2021-07-29

XamarinEssentials中怎么获取首选项的值

这期内容当中小编将会给大家带来有关XamarinEssentials中怎么获取首选项的值,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。 XamarinEssentials教程获取首

2021-07-29

jQuery中怎么获取内容和属性

这篇文章给大家介绍jQuery 中怎么获取内容和属性,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。 jQuery - 获取内容和属性 jQuery 拥有可操作 HTML 元素和属性的强大方

2021-07-29