frontend-maven-package-plugin 前后端统一打包Maven插件
-
在传统的前端分离开发中，前端使用Vue，后端使用SpringBoot
-
在开发环境中，两者都需要分别准备对应的开发环境。Vue对应的是Node，SpringBoot对应的是JRE（Java Runtime Environment）
-
在生产环境中，Vue代码打包成静态文件，交给Web服务器（例如Nginx、Tomcat）直接解析；SpringBoot代码打包为Jar包，运行在JRE环境中。
-
在生成环境中，有没有一种办法，将Vue代码打包到Jar包中，这样就省去了单独部署前端Vue代码的步骤。这就是frontend-maven-plugin解决的问题
-
通过frontend-maven-plugin等一系列插件，自动下载配置的Node环境，并指定打包
-
合并打包前端（Vue）、后端（SpringBoot）分离的项目到一个Jar包中，只需要运行该个Jar就可以同时启动前后端项目
-
为什么可以直接打包到Jar？因为前端Vue代码打包后是静态文件，Web服务器是可以直接解析的。而SpringBoot默认内置的Tomcat就是一款Web服务器，那自然就可以正常解析打包到Jar的Vue代码
插件官网：https://github.com/eirslett/frontend-maven-plugin
搭建项目场景
-
backend-demo：后端SpringBoot项目
-
frontend-demo：前端Vue基础项目
关键点
-
指定打包方式为pom
-
聚合子模块
-
管理项目依赖
-
指定编译插件
<!--指定打包方式：pom，父工程必须加-->
<packaging>pom</packaging>
<modules>
<module>backend-demo</module>
<module>frontend-demo</module>
</modules>
<build>
<plugins>
<!--编译插件-->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>
<configuration>
<source>${maven.compiler.source}</source>
<target>${maven.compiler.target}</target>
<encoding>${project.build.sourceEncoding}</encoding>
</configuration>
</plugin>
<!--注意：不要再这里放置spring-boot-maven-plugin打包插件。-->
<!--否则会报错：Unable to find main class。因为这个父工程没有任何代码，更别提主类的。-->
<!--正确的做法是那个子模块需要打Jar，就放到那个子模块中。-->
</plugins>
</build>
关键点
-
指定打包方式为Jar
-
清除插件maven-clean-plugin，用于在编译前，清除之前编译的文件、文件夹等，避免残留之前的内容
-
前端打包插件frontend-maven-plugin，为项目本地下载/安装Node和NPM，运行npm install命令
- 安装node环境和npm环境
- 安装前端项目的依赖：npm install
- 构建项目：npm run build
-
资源插件maven-resources-plugin，主要为了从前端项目里复制打包好的文件到springboot项目
-
打包插件spring-boot-maven-plugin，将项目达成Jar或War包
<build>
<plugins>
<!-- 清除插件maven-clean-plugin，用于在编译前，清除之前编译的文件、文件夹等，避免残留之前的内容 -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-clean-plugin</artifactId>
<version>3.1.0</version>
<configuration>
<filesets>
<fileset>
<!-- 前端资源目录，即：存放前端包目录-->
<directory>src/main/resources/public</directory>
</fileset>
<fileset>
<!-- Vue项目打包自动生成的dist目录 -->
<directory>${project.parent.basedir}/frontend-demo/dist</directory>
</fileset>
</filesets>
</configuration>
</plugin>
<!--前端打包插件frontend-maven-plugin，为项目本地下载/安装Node和NPM，运行npm install命令-->
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>${frontend-maven-plugin.version}</version>
<configuration>
<!-- 指定这个plugin的工作目录，相当于进入前端项目的目录：cd frontend-demo -->
<workingDirectory>${project.parent.basedir}/frontend-demo</workingDirectory>
<!-- 可选配置，指定node下载地址和版本 -->
<!-- <nodeDownloadRoot>https://registry.npmmirror.com/-/binary/node/</nodeDownloadRoot> -->
<nodeVersion>${maven-frontend-plugin.nodeVersion}</nodeVersion>
<!-- 可选配置，指定npm下载地址和版本 -->
<!-- <npmDownloadRoot>https://registry.npmmirror.com/-/binary/npm/</npmDownloadRoot> -->
<npmVersion>${maven-frontend-plugin.npmVersion}</npmVersion>
</configuration>
<!--
主要步骤：
1.安装node环境和npm环境
2.安装前端项目的依赖：npm install
3.构建项目：npm run build
-->
<executions>
<!--安装node环境和npm环境-->
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<!--这里可以覆盖上文的configuration标签中指定了nodeVersion-->
<nodeVersion>${maven-frontend-plugin.nodeVersion}</nodeVersion>
</configuration>
</execution>
<!--安装前端项目的依赖：npm install-->
<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>
<npmRegistryURL>http://registry.npmmirror.com/</npmRegistryURL>
</configuration>
</execution>
<!-- 构建项目 -->
<execution>
<id>npm run build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
</plugin>
<!--资源插件maven-resources-plugin，主要为了从前端项目里复制打包好的文件到springboot项目-->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>3.1.0</version>
<executions>
<execution>
<id>copy static</id>
<phase>generate-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<!-- 复制前端打包文件到后端项目的public（static亦可） -->
<outputDirectory>src/main/resources/public</outputDirectory>
<overwrite>true</overwrite>
<resources>
<resource>
<!-- 从前端打包的目录dist进行指定文件、文件夹内容的复制-->
<directory>${project.parent.basedir}/frontend-demo/dist</directory>
<includes>
<!-- 具体根据实际前端代码、及目录结构进行配置-->
<include>css/</include>
<include>fonts/</include>
<include>img/</include>
<include>js/</include>
<include>favicon.ico</include>
<include>index.html</include>
</includes>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
<!--打包插件spring-boot-maven-plugin，将项目达成Jar或War包-->
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>${spring.boot.version}</version>
<executions>
<execution>
<goals>
<!-- repackage可以把依赖的包都打包到生成的Jar包中 -->
<goal>repackage</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
关键点
-
对应Vue项目而言，pom.xml对它而言是不存在的，也是毫无意义的，此文件可以不要。
-
在此体现出来，只是为了配置子父工程而已，凸显出Vue工程属于父工程的子工程而已，便于IDE导入呈现展示而已。
点击父工程中的“package”
在项目根目录建立一个脚本文件：start.cmd
cd backend-demo/target
java -jar backend-demo-1.0-SNAPSHOT.jar
pause
启动项目后，访问：http://localhost:9898/，http://localhost:9898/hello
