起因:看过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.0modelVersion>
<groupId>com.demogroupId>
<artifactId>boot-vue-parentartifactId>
<version>1.0-SNAPSHOTversion>
<packaging>pompackaging>
<modules>
<module>boot-uimodule>
<module>boot-servermodule>
modules>
<properties>
<spring.boot.version>2.1.6.RELEASEspring.boot.version>
<maven.resource.version>3.1.0maven.resource.version>
<maven.clean.version>3.1.0maven.clean.version>
<maven.compiler.version>3.8.1maven.compiler.version>
<java.source.version>1.8java.source.version>
<java.target.version>1.8java.target.version>
<file.encoding>UTF-8file.encoding>
<checkstyle.skip>truecheckstyle.skip>
<maven-checkstyle-plugin-version>3.0.0maven-checkstyle-plugin-version>
<jacoco-version>0.8.2jacoco-version>
properties>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-parentartifactId>
<version>${spring.boot.version}version>
<scope>importscope>
<type>pomtype>
dependency>
dependencies>
dependencyManagement>
<profiles>
<profile>
<id>checkstyleid>
<activation>
<jdk>[1.8,)jdk>
activation>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-checkstyle-pluginartifactId>
<version>${maven-checkstyle-plugin-version}version>
<dependencies>
<dependency>
<groupId>com.puppycrawl.toolsgroupId>
<artifactId>checkstyleartifactId>
<version>8.9version>
dependency>
dependencies>
<executions>
<execution>
<id>checkstyle-validationid>
<phase>validatephase>
<configuration>
<configLocation>codestyle/checkstyle.xmlconfigLocation>
<encoding>UTF-8encoding>
<consoleOutput>trueconsoleOutput>
<failOnViolation>truefailOnViolation>
configuration>
<goals>
<goal>checkgoal>
goals>
execution>
executions>
plugin>
<plugin>
<groupId>org.apache.ratgroupId>
<artifactId>apache-rat-pluginartifactId>
<version>0.12version>
<executions>
<execution>
<id>verify.ratid>
<phase>verifyphase>
<goals>
<goal>checkgoal>
goals>
<configuration>
<excludes>
<exclude>**/*.versionsBackupexclude>
<exclude>**/.idea/exclude>
<exclude>**/*.imlexclude>
<exclude>**/*.txtexclude>
<exclude>**/*.shexclude>
<exclude>**/*.batexclude>
<exclude>**/*.mdexclude>
<exclude>.git/exclude>
<exclude>**/*.git*exclude>
<exclude>.gitignoreexclude>
<exclude>**/.settings/*exclude>
<exclude>**/.classpathexclude>
<exclude>**/*.propertiesexclude>
<exclude>**/.projectexclude>
<exclude>**/target/**exclude>
<exclude>**/*.logexclude>
<exclude>CODE_OF_CONDUCT.mdexclude>
<exclude>.codecov.ymlexclude>
<exclude>.travis.ymlexclude>
<exclude>PULL_REQUEST_TEMPLATE.mdexclude>
<exclude>CONTRIBUTING.mdexclude>
<exclude>**/codestyle/*exclude>
<exclude>**/node_modules/**exclude>
<exclude>**/.babelrcexclude>
<exclude>**/.editorconfigexclude>
<exclude>**/package-lock.jsonexclude>
<exclude>**/package.jsonexclude>
<exclude>**/OpenSans.cssexclude>
<exclude>**/.eslintignoreexclude>
<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>
<plugin>
<groupId>org.jacocogroupId>
<artifactId>jacoco-maven-pluginartifactId>
<version>${jacoco-version}version>
<executions>
<execution>
<goals>
<goal>prepare-agentgoal>
goals>
execution>
<execution>
<id>reportid>
<phase>testphase>
<goals>
<goal>reportgoal>
goals>
execution>
executions>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-compiler-pluginartifactId>
<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.0modelVersion>
<parent>
<groupId>com.demogroupId>
<artifactId>boot-vue-parentartifactId>
<version>1.0-SNAPSHOTversion>
parent>
<artifactId>boot-serverartifactId>
<properties>
<java.version>1.8java.version>
properties>
<dependencies>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-testartifactId>
<scope>testscope>
dependency>
dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-maven-pluginartifactId>
<version>${spring.boot.version}version>
<executions>
<execution>
<phase>packagephase>
<goals>
<goal>repackagegoal>
goals>
execution>
executions>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-clean-pluginartifactId>
<version>${maven.clean.version}version>
<configuration>
<filesets>
<fileset>
<directory>src/main/resources/staticdirectory>
fileset>
<fileset>
<directory>src/main/resources/templatesdirectory>
fileset>
filesets>
configuration>
plugin>
<plugin>
<groupId>org.apache.maven.pluginsgroupId>
<artifactId>maven-resources-pluginartifactId>
<version>${maven.resource.version}version>
<executions>
<execution>
<id>copy staticid>
<phase>generate-resourcesphase>
<goals>
<goal>copy-resourcesgoal>
goals>
<configuration>
<outputDirectory>src/main/resources/staticoutputDirectory>
<overwrite>trueoverwrite>
<resources>
<resource>
<directory>${project.parent.basedir}/boot-ui/distdirectory>
<includes>
<include>css/include>
<include>img/include>
<include>js/include>
<include>favicon.icoinclude>
includes>
resource>
resources>
configuration>
execution>
<execution>
<id>copy templateid>
<phase>generate-resourcesphase>
<goals>
<goal>copy-resourcesgoal>
goals>
<configuration>
<outputDirectory>src/main/resources/templatesoutputDirectory>
<overwrite>trueoverwrite>
<resources>
<resource>
<directory>${project.parent.basedir}/boot-ui/distdirectory>
<includes>
<include>index.htmlinclude>
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.demogroupId>
<artifactId>boot-vue-parentartifactId>
<version>1.0-SNAPSHOTversion>
parent>
<modelVersion>4.0.0modelVersion>
<artifactId>boot-uiartifactId>
<properties>
<project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8project.reporting.outputEncoding>
<java.version>1.8java.version>
<frontend-maven-plugin.version>1.6frontend-maven-plugin.version>
properties>
<build>
<plugins>
<plugin>
<groupId>com.github.eirslettgroupId>
<artifactId>frontend-maven-pluginartifactId>
<version>${frontend-maven-plugin.version}version>
<executions>
<execution>
<id>install node and npmid>
<goals>
<goal>install-node-and-npmgoal>
goals>
<configuration>
<nodeVersion>v10.16.0nodeVersion>
<npmVersion>6.9.0npmVersion>
configuration>
execution>
<execution>
<id>npm installid>
<goals>
<goal>npmgoal>
goals>
<phase>generate-resourcesphase>
<configuration>
<arguments>installarguments>
configuration>
execution>
<execution>
<id>npm run buildid>
<goals>
<goal>npmgoal>
goals>
<configuration>
<arguments>run buildarguments>
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文件
com.example
boot-vue-parent
1.0-SNAPSHOT
4.0.0
boot-ui
UTF-8
UTF-8
1.8
1.7.6
com.github.eirslett
frontend-maven-plugin
${frontend-maven-plugin.version}
install node and yarn
install-node-and-yarn
generate-resources
v10.16.0
v1.13.0
yarn install
yarn
install
yarn run build
yarn
run build