[maven]--Java插件frontend-maven-plugin打包前端项目

场景描述：

因为部署的时候不支持前端项目的直接部署，只能像java项目一样部署，因此需要给前端项目套上java的外壳，并将前端项目打包后的静态资源作为java项目的web部分部署

场景分析：

java的web部分是打成war包部署在tomcat中，部署在tomcat中的war包需要包含WEB-INF/web.xml部分，WEB-INF/web.xml对于tomcat容器是必须的文件：

• 需要使用java工具完成对前端代码的打包，形成需要的静态资源
• war包需要包含静态web项目
• war包需要包含WEB-INF/web.xml

在java中我们一般使用frontend-maven-plugin插件完成对vue/react等项目的打包

因为java默认web文件夹是是src/main/webapp：

• 如果直接使用webapp作为前端项目的名称，就导致所有的名称都必须是webapp，效果不好，如果以后可以将前端分离出来，该名称显得非常不明确，并且重复，或者就要重新命名
• 如果新建前端项目在webapp文件夹下，会导致文件嵌套层次过多，纯粹是不喜欢这么不简洁的目录结构

因此根据最终需要的内容做了个调整,来达成最终需要的文件内容：

1.直接在main文件夹下创建前端项目
2.前端项目打包生成的静态资源文件夹dist在main文件夹下,与前端项目平级
3.直接在main文件夹下新建文件夹，用于放置额外war包必须的web.xml与check.html(该文件可以是其它必须文件)

项目结构 & war包结构

war包官方目录结构

代码结构：

|-- pom.xml
 `-- src
     `-- main
         |-- java
         |   `-- com
         |       `-- example
         |           `-- projects
         |               `-- SampleAction.java
         |-- resources
         |   |-- images
         |   |   `-- sampleimage.jpg
         |   `-- sampleresource
         `-- webapp
             |-- WEB-INF
             |   `-- web.xml
             |-- index.jsp
             `-- jsp
                 `-- websource.jsp

war包目录：

 |-- META-INF
 |   |-- MANIFEST.MF
 |   `-- maven
 |       `-- com.example.projects
 |           `-- documentedproject
 |               |-- pom.properties
 |               `-- pom.xml
 |-- WEB-INF
 |   |-- classes
 |   |   |-- com
 |   |   |   `-- example
 |   |   |       `-- projects
 |   |   |           |-- SampleAction.class
 |   |   |           `-- SampleActionDependency.class
 |   |   `-- images
 |   |       |-- sampleimage-dependency.jpg
 |   |       `-- sampleimage.jpg
 |   `-- web.xml
 |-- index-dependency.jsp
 |-- index.jsp
 `-- jsp
     `-- websource.jsp

war包构造目录结构

代码结构：

|-- pom.xml
 `-- src
     `-- main
         |-- extra 
         |   |-- web.xml 
         |   `-- check.html 
         |-- dist (build后生成的静态文件)
         |   |-- assets 
         |   |   |-- css 
         |   |   `-- js 
         |   `-- index.html 
         `-- front-demo(vue/react项目)
             |-- public 
             |-- src 
             |-- ......
             `-- package.json 

war包目录

 |-- META-INF
 |   |-- MANIFEST.MF
 |   `-- maven
 |       `-- com.example.projects
 |           `-- documentedproject
 |               |-- pom.properties
 |               `-- pom.xml
 |-- WEB-INF
 |   |-- classes (空文件夹)
 |   `-- web.xml
 |-- assets 
 |-- index.html 
 `-- check.html

实现

根据脚手架创建maven项目

调整项目结构

项目目录结构：

下图为前端打包后的目录结构：

• resource 文件夹为空，但不可删除否则会导致复制多余的文件到war包中
• check 用于存放必须的额外文件
• front-demo 是前端项目(vue/react等,该项目执行npm build生成的dist与front-demo项目文件夹平级)
• dist文件是前端build后的