前言
以前的javaWeb项目大多数是java程序猿又当爹又当妈的，既搞前端又搞后端，所有的代码放在一起，最后发布的时候打包成一个war包发布。
随着时代的发展，前后端开始分离，很多web项目的前端和后端都不在一个项目里，等到都开发完了再整合在一起发布war包（当然互联网公司一般都不这样干）。这个时候如果靠开发人员手动去整合，不仅费时费力，还容易出错，为此我们可以借助maven的frontend-maven-plugin插件来自动化处理。
frontend-maven-plugin的介绍这里就不说了，主要功能是可以运行node、webpack、npm等，有兴趣可以自己上github看下。这边重点介绍怎么配置。
配置
打开maven项目里的pom.xml文件，在<build></build>中加入1
2
3
4
5
6
7
8
9
10
11
12<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.7.5</version>
<configuration>
<!--工作目录 指放置package.json和前端配置文件的位置-->
<workingDirectory>src/main/resources/vue-single-question</workingDirectory>
</configuration>
...
</plugin>
</plugins>
这边的<version>版本自己看着用，目前最新的版本(2019/3/13)是1.7.5，然后这里的<workingDirectory>是指放置package.json目录的位置，这里的vue-single-question是一个用vue-cli搭建的vue项目，原本如果要打包的话是要先在这个目录里执行npm run build的，然后把生成的dist放进war包里面，并且前提还必须电脑上安装了node环境。如果使用frontend-maven-plugin的话，不需要node环境也能build，可以说是很nice了。
接着我们在<configuration>后面写上1
2
3
4
5
6
7
8
9
10
11
12<executions>
<execution>
...
</execution>
<execution>
...
</execution>
<execution>
...
</execution>
...
</executions>
1、这里的每个<execution>相当于我们在命令行里面输入的每条命令，回想下我们用命令行打包的时候，首先需要电脑有node环境，所以这里的第一个<execution>就是下载node，配置如下1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<!--安装node和npm-->
<execution>
<id>install node and npm</id><!--名字任意 -->
<goals>
<goal>install-node-and-npm</goal><!--固定写法 -->
</goals>
<phase>generate-resources</phase>
<configuration>
<!--node和npm版本 -->
<nodeVersion>v10.12.0</nodeVersion>
<npmVersion>6.4.1</npmVersion>
<!--网络慢可以配置国内镜像 -->
<!--<nodeDownloadRoot>http://npm.taobao.org/mirrors/node/</nodeDownloadRoot>-->
<!--<npmDownloadRoot>http://npm.taobao.org/mirrors/npm/</npmDownloadRoot>-->
</configuration>
</execution>
这里的id可以随意命名，只是用来运行maven命名时打印出来的别名，类似下面这个 (前面是goal，括号里是id)
2、接着我们需要执行npm install来下载node_modules，所以第二个<execution>配置如下：1
2
3
4
5
6
7
8
9
10<execution>
<id>npm install</id><!--名字任意 -->
<goals>
<goal>npm</goal><!--固定写法 -->
</goals>
<phase>generate-resources</phase>
<configuration><!--参数，指的是跟在npm后面的参数，可选，默认install -->
<arguments>install</arguments>
</configuration>
</execution>
3、最后，我们需要执行npm run build来打包vue项目，所以最后一个<execution>配置如下：1
2
3
4
5
6
7
8
9
10<execution>
<id>npm build</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
完整配置如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57<build>
<plugins>
<!--vue编译-->
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.7.5</version>
<configuration>
<!--工作目录 指放置package.json和前端配置文件的位置-->
<workingDirectory>src/main/resources/vue-single-question</workingDirectory>
</configuration>
<executions>
<!--安装node和npm-->
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<nodeVersion>v10.12.0</nodeVersion>
<npmVersion>6.4.1</npmVersion>
<!--网络慢可以配置国内镜像 -->
<!--<nodeDownloadRoot>http://npm.taobao.org/mirrors/node/</nodeDownloadRoot>-->
<!--<npmDownloadRoot>http://npm.taobao.org/mirrors/npm/</npmDownloadRoot>-->
</configuration>
</execution>
<!--执行npm install-->
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<!--执行npm run build-->
<execution>
<id>npm build</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
使用
运行mvn clean compile或者idea里面的maven点击compile即可。
结论
frontend-maven-plugin实际上就是用maven来帮我们自动运行node命令，优点是免node环境，方便代码拷贝给别人，不需要环境即可打包前端代码。
