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命令时，利⽤ma
ven插件执⾏cnpm run build命令(我是使⽤的淘宝的镜像cnpm，国外的npm命令会相对慢⼀些，⼤家根据⾃⼰的条件选择，具体命令请看项⽬中前端vue⽂件的README.md)，⼀次性完成整个过程
实现⽅法是这样的，我们要引⼊jo插件来进⾏maven调⽤node命令，l中为：
<plugin>
<groupId&jo</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中，具体的请参考l中的，
将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>
maven打包本地jar包<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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。