SpringBoot+Vue前后端分离项目,maven package自动打包整合

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="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

回到顶部