Spring Boot + Vue 前后端分离项目，Maven 自动打包集成

<?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> <artifactId>demo</artifactId> <groupId>com.xcbeyond.demo</groupId> <version>1.0.0</version> </parent> <modelVersion>4.0.0</modelVersion> <groupId>com.xcbeyond.demo.spring.boot</groupId> <artifactId>spring-boot</artifactId> <dependencies> # 配置项目依赖包 …… </dependencies> <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/static</directory> </fileset> <fileset> <!-- Vue项目打包自动生成的dist目录 --> <directory>${project.parent.basedir}/vue-ui/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>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> <!--资源插件，主要为了从前端项目里复制打包好的文件到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> <!-- 复制前端打包文件到这里 --> <outputDirectory>src/main/resources/static</outputDirectory> <overwrite>true</overwrite> <resources> <resource> <!-- 从前端打包的目录dist进行指定文件、文件夹内容的复制--> <directory>${project.parent.basedir}/vue-ui/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> </plugins> </build> </project>