前言：
此刻看官们对“前后端分离打包在一起”大体比较关切，各位老铁们都想要分析一些“前后端分离打包在一起”的相关文章。那么小编也在网络上收集了一些有关“前后端分离打包在一起””的相关文章，希望看官们能喜欢，我们一起来学习一下吧！推荐阅读：GitHub疯传15k+的《SpringBoot+vue全栈开发实战项目》太香了
起因：看过Dubbo管控台的都知道，人家是个前后端分离的项目，可是一条打包命令能让两个项目整合在一起，我早想这样玩玩了。
1. 建立个maven父项目
next
这个作为父工程，next
Finish，然后把项目目录的src删除
2. 建立springboot子项目（Module）
next
next
这里引入模板引擎，是为了能运行前端项目，next
3. 建立前端子项目
这里就不是new Module了，而是直接在父项目根目录，用vue-cli3.0工具直接创建。
4. 先提前看一下最终项目目录（这个目录是我最后打包测试没问题的目录，所以会出现一些打包之后才会有的文件~）5. 要实现打包整合只需要修改三个文件，即：三个pom.xml文件。
第一个，parent的pom.xml
<?xml version="1.0" encoding="UTF-8"?><project xmlns="; xmlns:xsi="; xsi:schemaLocation=" ;> <modelVersion>4.0.0</modelVersion> <groupId>com.demo</groupId> <artifactId>boot-vue-parent</artifactId> <version>1.0-SNAPSHOT</version> <packaging>pom</packaging> <modules> <module>boot-ui</module> <module>boot-server</module> </modules> <properties> <spring.boot.version>2.1.6.RELEASE</spring.boot.version> <maven.resource.version>3.1.0</maven.resource.version> <maven.clean.version>3.1.0</maven.clean.version> <maven.compiler.version>3.8.1</maven.compiler.version> <java.source.version>1.8</java.source.version> <java.target.version>1.8</java.target.version> <file.encoding>UTF-8</file.encoding> <checkstyle.skip>true</checkstyle.skip> <maven-checkstyle-plugin-version>3.0.0</maven-checkstyle-plugin-version> <jacoco-version>0.8.2</jacoco-version> </properties> <dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>${spring.boot.version}</version> <scope>import</scope> <type>pom</type> </dependency> </dependencies> </dependencyManagement> <profiles> <profile> <id>checkstyle</id> <activation> <jdk>[1.8,)</jdk> </activation> <build> <plugins> <!--辅助判断代码格式是否满足规范（非必须）--> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-checkstyle-plugin</artifactId> <version>${maven-checkstyle-plugin-version}</version> <dependencies> <dependency> <groupId>com.puppycrawl.tools</groupId> <artifactId>checkstyle</artifactId> <version>8.9</version> </dependency> </dependencies> <executions> <execution> <id>checkstyle-validation</id> <phase>validate</phase> <configuration> <configLocation>codestyle/checkstyle.xml</configLocation> <encoding>UTF-8</encoding> <consoleOutput>true</consoleOutput> <failOnViolation>true</failOnViolation> </configuration> <goals> <goal>check</goal> </goals> </execution> </executions> </plugin> <!--Apache RAT (Release Audit Tool) 是一个用来检查软件许可证发行的准确性和高效性的工具。它的本质是：对可能出现的问题作出预测（非必须）--> <plugin> <groupId>org.apache.rat</groupId> <artifactId>apache-rat-plugin</artifactId> <version>0.12</version> <executions> <execution> <id>verify.rat</id> <phase>verify</phase> <goals> <goal>check</goal> </goals> <configuration> <excludes> <exclude>**/*.versionsBackup</exclude> <exclude>**/.idea/</exclude> <exclude>**/*.iml</exclude> <exclude>**/*.txt</exclude> <exclude>**/*.sh</exclude> <exclude>**/*.bat</exclude> <exclude>**/*.md</exclude> <exclude>.git/</exclude> <exclude>**/*.git*</exclude> <exclude>.gitignore</exclude> <exclude>**/.settings/*</exclude> <exclude>**/.classpath</exclude> <exclude>**/*.properties</exclude> <exclude>**/.project</exclude> <exclude>**/target/**</exclude> <exclude>**/*.log</exclude> <exclude>CODE_OF_CONDUCT.md</exclude> <exclude>.codecov.yml</exclude> <exclude>.travis.yml</exclude> <exclude>PULL_REQUEST_TEMPLATE.md</exclude> <exclude>CONTRIBUTING.md</exclude> <exclude>**/codestyle/*</exclude> <exclude>**/node_modules/**</exclude> <exclude>**/.babelrc</exclude> <exclude>**/.editorconfig</exclude> <exclude>**/package-lock.json</exclude> <exclude>**/package.json</exclude> <exclude>**/OpenSans.css</exclude> <exclude>**/.eslintignore</exclude> <exclude>**/resources/META-INF/**</exclude> <exclude>**/src/main/resources/public/**</exclude> <exclude>**/src/licenses/**</exclude> </excludes> </configuration> </execution> </executions> </plugin> </plugins> </build> </profile> </profiles> <build> <plugins> <!--JAVA代码覆盖率工具（非必须）--> <plugin> <groupId>org.jacoco</groupId> <artifactId>jacoco-maven-plugin</artifactId> <version>${jacoco-version}</version> <executions> <execution> <goals> <goal>prepare-agent</goal> </goals> </execution> <execution> <id>report</id> <phase>test</phase> <goals> <goal>report</goal> </goals> </execution> </executions> </plugin> <!--编译插件--> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>${maven.compiler.version}</version> <configuration> <source>${java.source.version}</source> <target>${java.target.version}</target> <encoding>${file.encoding}</encoding> </configuration> </plugin> </plugins> </build></project>第二个，springboot项目的pom.xml文件
<?xml version="1.0" encoding="UTF-8"?><project xmlns="; xmlns:xsi="; xsi:schemaLocation=" ;> <modelVersion>4.0.0</modelVersion> <parent> <groupId>com.demo</groupId> <artifactId>boot-vue-parent</artifactId> <version>1.0-SNAPSHOT</version> </parent> <artifactId>boot-server</artifactId> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <version>${spring.boot.version}</version> <!--解决打包后，执行java -jar 命令，找不到主清单属性--> <executions> <execution> <phase>package</phase> <goals> <goal>repackage</goal> </goals> </execution> </executions> </plugin> <!--clean插件--> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-clean-plugin</artifactId> <version>${maven.clean.version}</version> <configuration> <filesets> <fileset> <directory>src/main/resources/static</directory> </fileset> <fileset> <directory>src/main/resources/templates</directory> </fileset> </filesets> </configuration> </plugin> <!--资源插件，主要为了从前端项目里复制打包好的文件到springboot项目--> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-resources-plugin</artifactId> <version>${maven.resource.version}</version> <executions> <execution> <id>copy static</id> <phase>generate-resources</phase> <goals> <goal>copy-resources</goal> </goals> <configuration> <outputDirectory>src/main/resources/static</outputDirectory> <overwrite>true</overwrite> <resources> <resource> <!--因为vue-cli打包的目录在项目的根目录，所以从这里复制--> <directory>${project.parent.basedir}/boot-ui/dist</directory> <includes> <include>css/</include> <include>img/</include> <include>js/</include> <include>favicon.ico</include> </includes> </resource> </resources> </configuration> </execution> <execution> <id>copy template</id> <phase>generate-resources</phase> <goals> <goal>copy-resources</goal> </goals> <configuration> <outputDirectory>src/main/resources/templates</outputDirectory> <overwrite>true</overwrite> <resources> <resource> <!--因为vue-cli打包的目录在项目的根目录，所以从这里复制--> <directory>${project.parent.basedir}/boot-ui/dist</directory> <includes> <include>index.html</include> </includes> </resource> </resources> </configuration> </execution> </executions> </plugin> </plugins> </build></project>最后一个，vue项目里新添加的pom.xml文件
<?xml version="1.0" encoding="UTF-8"?><project xmlns="; xmlns:xsi="; xsi:schemaLocation=" ;> <parent> <groupId>com.demo</groupId> <artifactId>boot-vue-parent</artifactId> <version>1.0-SNAPSHOT</version> </parent> <modelVersion>4.0.0</modelVersion> <artifactId>boot-ui</artifactId> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> <frontend-maven-plugin.version>1.6</frontend-maven-plugin.version> </properties> <build> <plugins> <!--frontend-maven-plugin为项目本地下载/安装Node和NPM，运行npm install命令--> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>${frontend-maven-plugin.version}</version> <executions> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> <configuration> <nodeVersion>v10.16.0</nodeVersion> <npmVersion>6.9.0</npmVersion> </configuration> </execution> <!-- Install all project dependencies --> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> <!-- optional: default phase is "generate-resources" --> <phase>generate-resources</phase> <!-- Optional configuration which provides for running any npm command --> <configuration> <arguments>install</arguments> </configuration> </execution> <!-- Build and minify static files --> <execution> <id>npm run build</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>run build</arguments> </configuration> </execution> </executions> </plugin> </plugins> </build></project>6. 解释一下最重要的插件就两个，一个是springboot项目里的maven-resources-plugin，另一个是vue项目里的frontend-maven-plugin。
资源插件的复制路径很好理解，vue-cli3.0打包的目录如图所示
而我们要在springboot项目里运行，就要把index.html文件复制到templates目录，其他文件复制到static目录。
7. 打包运行。
<?xml version="1.0" encoding="UTF-8"?><project xmlns="; xmlns:xsi="; xsi:schemaLocation=" ;> <modelVersion>4.0.0</modelVersion> <groupId>com.demo</groupId> <artifactId>boot-vue-parent</artifactId> <version>1.0-SNAPSHOT</version> <packaging>pom</packaging> <modules> <module>boot-ui</module> <module>boot-server</module> </modules> <properties> <spring.boot.version>2.1.6.RELEASE</spring.boot.version> <maven.resource.version>3.1.0</maven.resource.version> <maven.clean.version>3.1.0</maven.clean.version> <maven.compiler.version>3.8.1</maven.compiler.version> <java.source.version>1.8</java.source.version> <java.target.version>1.8</java.target.version> <file.encoding>UTF-8</file.encoding> <checkstyle.skip>true</checkstyle.skip> <maven-checkstyle-plugin-version>3.0.0</maven-checkstyle-plugin-version> <jacoco-version>0.8.2</jacoco-version> </properties> <dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>${spring.boot.version}</version> <scope>import</scope> <type>pom</type> </dependency> </dependencies> </dependencyManagement> <profiles> <profile> <id>checkstyle</id> <activation> <jdk>[1.8,)</jdk> </activation> <build> <plugins> <!--辅助判断代码格式是否满足规范（非必须）--> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-checkstyle-plugin</artifactId> <version>${maven-checkstyle-plugin-version}</version> <dependencies> <dependency> <groupId>com.puppycrawl.tools</groupId> <artifactId>checkstyle</artifactId> <version>8.9</version> </dependency> </dependencies> <executions> <execution> <id>checkstyle-validation</id> <phase>validate</phase> <configuration> <configLocation>codestyle/checkstyle.xml</configLocation> <encoding>UTF-8</encoding> <consoleOutput>true</consoleOutput> <failOnViolation>true</failOnViolation> </configuration> <goals> <goal>check</goal> </goals> </execution> </executions> </plugin> <!--Apache RAT (Release Audit Tool) 是一个用来检查软件许可证发行的准确性和高效性的工具。它的本质是：对可能出现的问题作出预测（非必须）--> <plugin> <groupId>org.apache.rat</groupId> <artifactId>apache-rat-plugin</artifactId> <version>0.12</version> <executions> <execution> <id>verify.rat</id> <phase>verify</phase> <goals> <goal>check</goal> </goals> <configuration> <excludes> <exclude>**/*.versionsBackup</exclude> <exclude>**/.idea/</exclude> <exclude>**/*.iml</exclude> <exclude>**/*.txt</exclude> <exclude>**/*.sh</exclude> <exclude>**/*.bat</exclude> <exclude>**/*.md</exclude> <exclude>.git/</exclude> <exclude>**/*.git*</exclude> <exclude>.gitignore</exclude> <exclude>**/.settings/*</exclude> <exclude>**/.classpath</exclude> <exclude>**/*.properties</exclude> <exclude>**/.project</exclude> <exclude>**/target/**</exclude> <exclude>**/*.log</exclude> <exclude>CODE_OF_CONDUCT.md</exclude> <exclude>.codecov.yml</exclude> <exclude>.travis.yml</exclude> <exclude>PULL_REQUEST_TEMPLATE.md</exclude> <exclude>CONTRIBUTING.md</exclude> <exclude>**/codestyle/*</exclude> <exclude>**/node_modules/**</exclude> <exclude>**/.babelrc</exclude> <exclude>**/.editorconfig</exclude> <exclude>**/package-lock.json</exclude> <exclude>**/package.json</exclude> <exclude>**/OpenSans.css</exclude> <exclude>**/.eslintignore</exclude> <exclude>**/resources/META-INF/**</exclude> <exclude>**/src/main/resources/public/**</exclude> <exclude>**/src/licenses/**</exclude> </excludes> </configuration> </execution> </executions> </plugin> </plugins> </build> </profile> </profiles> <build> <plugins> <!--JAVA代码覆盖率工具（非必须）--> <plugin> <groupId>org.jacoco</groupId> <artifactId>jacoco-maven-plugin</artifactId> <version>${jacoco-version}</version> <executions> <execution> <goals> <goal>prepare-agent</goal> </goals> </execution> <execution> <id>report</id> <phase>test</phase> <goals> <goal>report</goal> </goals> </execution> </executions> </plugin> <!--编译插件--> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>${maven.compiler.version}</version> <configuration> <source>${java.source.version}</source> <target>${java.target.version}</target> <encoding>${file.encoding}</encoding> </configuration> </plugin> </plugins> </build></project>进入根目录，执行打包命令
..
进入server的target目录，执行java -jar命令
访问：
完成
8. 引申frontend-maven-plugin
这个插件不仅仅支持node+npm，还支持node+yarn。这里我也写了个例子
boot-ui项目的pom.xml文件
<?xml version="1.0" encoding="UTF-8"?><project xmlns=";xmlns:xsi=";xsi:schemaLocation=" ;><parent><groupId>com.example</groupId><artifactId>boot-vue-parent</artifactId><version>1.0-SNAPSHOT</version></parent><modelVersion>4.0.0</modelVersion><artifactId>boot-ui</artifactId><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding><java.version>1.8</java.version><frontend-maven-plugin.version>1.7.6</frontend-maven-plugin.version></properties><build><plugins><!--安装node和npm的情况--><!--<plugin>--><!--<groupId>com.github.eirslett</groupId>--><!--<artifactId>frontend-maven-plugin</artifactId>--><!--<version>${frontend-maven-plugin.version}</version>--><!--<executions>--><!--<execution>--><!--<id>install node and npm</id>--><!--<goals>--><!--<goal>install-node-and-npm</goal>--><!--</goals>--><!--<configuration>--><!--<nodeVersion>v10.16.0</nodeVersion>--><!--<npmVersion>6.9.0</npmVersion>--><!--</configuration>--><!--</execution>--><!--<!– Install all project dependencies –>--><!--<execution>--><!--<id>npm install</id>--><!--<goals>--><!--<goal>npm</goal>--><!--</goals>--><!--<phase>generate-resources</phase>--><!--<configuration>--><!--<arguments>install</arguments>--><!--</configuration>--><!--</execution>--><!--<!– Build and minify static files –>--><!--<execution>--><!--<id>npm run build</id>--><!--<goals>--><!--<goal>npm</goal>--><!--</goals>--><!--<configuration>--><!--<arguments>run build</arguments>--><!--</configuration>--><!--</execution>--><!--</executions>--><!--</plugin>--><!--安装node和yarn的情况--><plugin><groupId>com.github.eirslett</groupId><artifactId>frontend-maven-plugin</artifactId><version>${frontend-maven-plugin.version}</version><executions><execution><id>install node and yarn</id><goals><goal>install-node-and-yarn</goal></goals><phase>generate-resources</phase><configuration><nodeVersion>v10.16.0</nodeVersion><yarnVersion>v1.13.0</yarnVersion></configuration></execution><!-- Install all project dependencies --><execution><id>yarn install</id><goals><goal>yarn</goal></goals><configuration><arguments>install</arguments></configuration></execution><!-- Build and minify static files --><execution><id>yarn run build</id><goals><goal>yarn</goal></goals><configuration><arguments>run build</arguments></configuration></execution></executions></plugin></plugins></build></project> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
