要在Spring Boot项目的Maven打包过程中自动将前端项目打包到最终的JAR文件中,你可以按照以下步骤操作:

1. 配置前端构建

假设你有一个前端项目(如Vue/React/Angular)位于Spring Boot项目的frontend目录中。

1.1 确保前端项目可以独立构建

在前端项目中,确保有正确的构建脚本(如package.json中的build脚本)。

2. 配置Maven插件

在Spring Boot项目的pom.xml中添加以下插件配置:

2.1 前端构建插件(exec-maven-plugin)

<plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>exec-maven-plugin</artifactId>
    <version>3.1.0</version>
    <executions>
        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>exec</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
                <executable>npm</executable>
                <arguments>
                    <argument>install</argument>
                </arguments>
                <!-- 前端路径 -->
                <workingDirectory>${project.basedir}/frontend</workingDirectory>
            </configuration>
        </execution>
        <execution>
            <id>npm build</id>
            <goals>
                <goal>exec</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
                <executable>npm</executable>
                <arguments>
                    <argument>run</argument>
                    <argument>build</argument>
                </arguments>
                <!-- 前端路径 -->
                <workingDirectory>${project.basedir}/frontend</workingDirectory>
            </configuration>
        </execution>
    </executions>
</plugin>

2.2 资源复制插件(maven-resources-plugin)

<plugin>
    <artifactId>maven-resources-plugin</artifactId>
    <version>3.3.0</version>
    <executions>
        <execution>
            <id>copy-frontend</id>
            <phase>generate-resources</phase>
            <goals>
                <goal>copy-resources</goal>
            </goals>
            <configuration>
                <!-- 前端打包后dist目录下文件复制到jar包中路径 -->
                <outputDirectory>${project.build.directory}/classes/static</outputDirectory>
                <resources>
                    <resource>
                        <!-- 前端路径 -->
                        <directory>frontend/dist</directory>
                    </resource>
                </resources>
            </configuration>
        </execution>
    </executions>
</plugin>

3. 完整示例

这是一个完整的pom.xml配置示例:

<build>
    <plugins>
        <!-- 前端构建 -->
        <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>exec-maven-plugin</artifactId>
            <version>3.1.0</version>
            <executions>
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>exec</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <executable>npm</executable>
                        <arguments>
                            <argument>install</argument>
                        </arguments>
                        <workingDirectory>${project.basedir}/frontend</workingDirectory>
                    </configuration>
                </execution>
                <execution>
                    <id>npm build</id>
                    <goals>
                        <goal>exec</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                        <executable>npm</executable>
                        <arguments>
                            <argument>run</argument>
                            <argument>build</argument>
                        </arguments>
                        <workingDirectory>${project.basedir}/frontend</workingDirectory>
                    </configuration>
                </execution>
            </executions>
        </plugin>
        
        <!-- 资源复制 -->
        <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <version>3.3.0</version>
            <executions>
                <execution>
                    <id>copy-frontend</id>
                    <phase>generate-resources</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>${project.build.directory}/classes/static</outputDirectory>
                        <resources>
                            <resource>
                                <directory>frontend/dist</directory>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>
        
        <!-- Spring Boot Maven Plugin -->
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

4. 目录结构要求

确保你的项目结构如下:

your-project/
├── frontend/          # 前端项目
│   ├── dist/          # 前端构建输出目录(由npm build生成)
│   ├── src/           # 前端源代码
│   ├── package.json   # 前端项目配置
│   └── ...           
├── src/               # 后端Java代码
└── pom.xml            # Maven配置

5. 构建命令

只需运行标准的Maven命令:

mvn clean package

这会自动:

  1. 安装前端依赖
  2. 构建前端项目
  3. 将构建好的前端资源复制到Spring Boot的静态资源目录
  4. 打包整个应用为一个可执行的JAR文件

注意事项

  1. 确保系统中已安装Node.js和npm,并且npm命令在PATH中可用
  2. 前端构建输出目录(通常是dist)需要与maven-resources-plugin中配置的directory一致
  3. 如果前端项目使用不同的构建工具(如Yarn),需要相应调整exec-maven-plugin的配置

通过这种方式,你可以实现前后端一体化的打包流程,最终生成一个包含前端资源的可执行Spring Boot JAR文件。