SpringBoot+Vue前后端分离项目,maven package自动打包整合
起因:看过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="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<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="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<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="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<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. 打包运行。
mvn clean package -Dmaven.test.skip=true
进入根目录,执行打包命令
..
进入server的target目录,执行java -jar命令
访问:
完成 https://github.com/Mysakura/boot-vue-parent
8. 引申 frontend-maven-plugin
这个插件不仅仅支持node+npm,还支持node+yarn。这里我也写了个例子 https://github.com/Mysakura/frontend-maven-plugin-demo
boot-ui项目的pom.xml文件
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<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>
以上是 SpringBoot+Vue前后端分离项目,maven package自动打包整合 的全部内容, 来源链接: utcz.com/z/376882.html