起因:看过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