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

Springboot项目与Vue项目整合打包的实现方式 在现代软件开发中，前端和后端项目的分离开发和集成是非常常见的。在这种情况下，我们需要在开发时将前端和后端项目分离，以便于更好地维护和更新代码。但是，在部署时，我们需要将前端和后端项目整合在一起，以便于实现完整的应用程序。因此，本文将介绍如何将Springboot项目与Vue项目整合打包的实现方式。 为什么需要前后端项目开发时分离，部署时合并？ 在一些公司中，部署实施人员的技术无法和互联网公司的运维团队相比，由于各种不定的环境也无法做到自动构建，容器化部署等。因此，在这种情况下，我们需要尽量减少部署时的服务软件需求，打出的包数量也尽量少。针对这种情况，我们可以采取在开发中做到前后端独立开发，打包时在后端Springboot打包发布时将前端的构建输出一起打入，最后只需部署Springboot的项目即可，无需再安装nginx服务器。 方法一：简单的整合方式 在这个方法中，我们可以将前端Vue项目的构建输出复制到Springboot项目的resources/static下，然后在application中跑起来boot项目，这样直接访问index.html就可以访问到页面。操作步骤如下： 1. 前端Vue项目使用命令npm run build或cnpm run build打包生成dist文件。 2. 在Springboot项目中resources下建立static文件夹，将dist文件中的文件复制到static中。 3. 然后去application中跑起来boot项目，这样直接访问index.html就可以访问到页面。 项目结构如图： 然而，这种方法不推荐使用手工合并，也不推荐将前端代码构建后提交到Springboot的resource下。好的方式应该是保持前后端完全独立开发代码，项目代码互不影响，借助Jenkins这样的构建工具在构建Springboot时触发前端构建并编写自动化脚本将前端webpack构建好的资源拷贝到Springboot下再进行jar的打包，最后就得到了一个完全包含前后端的Springboot项目。 方法二：使用Maven插件实现自动化构建 在这个方法中，我们可以使用Maven插件来实现自动化构建。我们需要在src/main下建立一个webapp文件夹，然后将前端项目的源文件复制到该文件夹下。然后，使用Maven命令执行本地node打包命令，利用Maven插件执行cnpm run build命令。 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>.... 这样，我们可以一次性完成整个过程实现方法。