This is the 28th day of my participation in Gwen Challenge

preface

Nowadays, in order to reduce the high coupling between projects and service modules, various projects put forward the “front and back end separation”, and how to package the projects separated from the front and back end?

Generally, after the front-end project is packaged, manually copy the package file to the SRC \main\resources\static directory of the back-end project and then package the back-end project. In this way, it is always troublesome to manually copy and package the back-end project repeatedly. (Even if Jenkins package deployment is adopted, there will still be the above two packaging processes)

In order to solve the above problems, I have searched Maven build configuration and plugins, and found that it is not difficult to solve the above problems through Maven automatic packaging integration. Here I share with you.

Front and rear end project structure requirements

This section uses the back-end project of Spring Boot + Vue as an example.

Build the project through Maven and create front-end and back-end projects for the parent project structure as follows:

Spring - the boot - vue - parent | spring - the boot # spring boot backend engineering | - SRC | Java - main | -- - | -- -... | - resources | - static # store front resource directory | - pom. The XML # spring - the boot backend engineering of pom. The XML file | vue - UI # vue front-end engineering | -... | - dist # packaged at compile time, automatically create the directory, do not need to manually create the directory | - pom. The XML # Vue front-end engineering of pom. The XML file, the file can not pom. The XML parent project of pom. The XML fileCopy the code

The above lists only the key directory structures.

Configure the POM.xml file

1. The pom. XML file of the parent project

Configure the spring-boot-Maven-plugin to meet the structure configuration requirements of Maven child and parent projects.

<? The 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.0 < / modelVersion > < groupId > com. Xcbeyond. Demo < / groupId > < artifactId > demo < / artifactId > The < packaging > pom < / packaging > < version > 1.0.0 < / version > < modules > <! <module> Spring-boot </module> <! <module>vue-ui</module> </modules> <dependencies> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <version>2.0.7.RELEASE</version> <executions> <execution> <goals> <goal>repackage</goal><! Executions </executions> </executions> </executions> </executions> </executions> . < groupId > org, apache maven plugins < / groupId > < artifactId > maven - compiler - plugin < / artifactId > < version > 3.7.0 < / version > <configuration> <source>1.8</source> <target>1.8</target> </configuration> </plugins> </build> </project>Copy the code

2. Pom. XML file of Vue front-end engineering

For the Vue project, pom.xml does not exist and is meaningless, so this file can be discarded. In this embodiment, just to configure the parent project, highlighting the Vue project belongs to the parent project of the child project, easy to IDE import display.

<? The 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" > < the parent > < artifactId > demo < / artifactId > < groupId > com. Xcbeyond. Demo < / groupId > < version > 1.0.0 < / version > < / parent > < modelVersion > 4.0.0 < / modelVersion > < groupId > com. Xcbeyond. Demo. Vue. UI < / groupId > < artifactId > vue - UI < / artifactId > </project>Copy the code

3. Pom. XML file of back-end project

The pom.xml file is the configuration focus, as follows:

<? The 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" > < the parent > < artifactId > demo < / artifactId > < groupId > com. Xcbeyond. Demo < / groupId > < version > 1.0.0 < / version > < / parent > < modelVersion > 4.0.0 < / modelVersion > < groupId > com. Xcbeyond. Demo. Spring. The boot < / groupId > < artifactId > spring - the boot < / artifactId > <dependencies> </dependencies> <build> <plugins> <! Maven-clean-plugin is used to clean files and folders before compiling. Plugins </groupId> <artifactId>maven-clean-plugin</artifactId> <version>3.1.0</version> <configuration> <filesets> <fileset> <! - front resource directory, i.e., store front package directory - > < directory > SRC/main/resources/static < / directory > < fileset > < fileset > <! ${project.parent. Basedir}/ Vue - UI /dist</directory> </filesets> </configuration> </plugin> <! -- Frontend maven-plugin is used to download/install Node and NPM locally. Run NPM install --> <plugin> <groupId>com.github. Eirslett </groupId> <artifactId>frontend-maven-plugin</artifactId> < version > 1.6 < / version > < configuration > < workingDirectory > ${project. Parent. Basedir} / vue - UI < / workingDirectory > </configuration> <executions> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> <configuration> <nodeVersion>v8.12.0</nodeVersion> <npmVersion>6.4.1</npmVersion> </configuration> </execution> <! -- Install all project dependencies --> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> <phase>generate-resources</phase> <configuration> <arguments>install</arguments> </configuration> </execution> <! -- Build and minify static files --> <execution> <id>npm run build</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>run build</arguments> </configuration> </execution> </executions> </plugin> <! -- Resource plugin, < plugins > <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-resources-plugin</artifactId> <version>3.1.0</version> <executions> <id>copy static</id> <phase>generate-resources</phase> <goals> <goal>copy-resources</goal> </goals> <configuration> <! - copy the front packaging files here - > < outputDirectory > SRC/main/resources/static < / outputDirectory > < overwrite > true < / overwrite > < resources > <resource> <! ${project.parent. Basedir}/vue- UI /dist</directory> <includes> <! Fonts /</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> </plugins> </build> </project>Copy the code

Packaged deployment

The pom.xml configuration above has integrated Maven automatic packaging for both front and back end projects. When packaging, just focus on the packaging of the back end projects (spring-Boot sub-projects), and the front end and back end will be packaged together into the back-end success.

In the subproject back-end project, execute the package command

mvn clean package -Dmaven.test.skip=true

Or package directly using the corresponding Maven in the IDE.

At this point, only one package is needed to complete the Maven automatic packaging of the front and back end projects, no longer need to worry about multiple packages, missing packages.

​

​