springboot+vue前后端分离项目打包成jar包及运行

news2025/2/24 3:37:59

将 Spring Boot 和 Vue.js 项目打包成 jar 包需要按照以下步骤操作：

在项目的根目录中，使用命令行进入 Vue.js 项目的根目录，然后运行以下命令：

npm run build

这个命令将会构建 Vue.js 项目，并在项目的 dist 目录中生成一个编译好的前端静态文件。

在 Spring Boot 项目中，找到 Maven 配置文件 pom.xml，添加以下配置：

<build>
      <resources>
          <resource>
              <directory>src/main/resources</directory>
              <filtering>true</filtering>
          </resource>
      </resources>
      <plugins>
          <plugin>
              <groupId>org.springframework.boot</groupId>
              <artifactId>spring-boot-maven-plugin</artifactId>
              <configuration>
                  <mainClass>com.example.demo.DemoApplication</mainClass>
                  <layout>JAR</layout>             
              </configuration>
              <executions>
                  <execution>
                      <id>build-frontend</id>
                      <phase>generate-resources</phase>
                      <goals>
                          <goal>npm</goal>
                      </goals>
                      <configuration>
                          <arguments>run build</arguments>
                      </configuration>
                  </execution>
              </executions>
          </plugin>
      </plugins>
  </build>

这个配置主要是引入 Spring Boot Maven 插件，并将 Vue.js 项目的构建步骤集成进来。其中，配置中的 mainClass 需要替换为你自己的Spring Boot 启动类。

在命令行中进入到 Spring Boot 项目的根目录，输入以下命令来打包jar包：

mvn clean package

在这里插入图片描述

当构建完成后，在 Spring Boot 项目的 target 目录中就会生成一个名为 xxx.jar 的可执行的 jar 包。你可以在命令行中进入该目录，并输入以下命令来启动 Spring Boot 程序：

java -jar xxx.jar

至此，你就已经成功将 Spring Boot 和 Vue.js 项目打包成了 jar 包，并且可以在命令行中启动运行了。

如果你的前端代码是在 VS Code 编辑器中，而后端代码是在 IDEA 中那么你可以按照以下步骤操作：

在 VS Code 中打开前端项目，在命令行中运行 npm run build 命令，这个命令会将前端项目构建打包生成静态文件。

将生成的静态文件拷贝到后端 Spring Boot 项目的 src/main/resources/static 目录下。

在 IDEA 中打开后端 Spring Boot 项目，在项目的 Maven 配置文件 pom.xml 中添加以下插件：

<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <executions>
                <execution>
                    <id>copy-static-files</id>
                    <phase>generate-resources</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
                        <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
                        <resources>
                            <resource>
                                <directory>src/main/resources/static</directory>
                                <includes>
                                    <include>**/*</include>
                                </includes>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

这个插件会在 Maven 构建过程中将前端项目生成的静态文件复制到生成的 jar 文件中。

执行以下 Maven 命令将后端项目打包成 jar 包：

mvn clean package

打包完成后，在项目的 target 文件夹中会生成一个名为 {project name}-{version}.jar 的 jar 文件。

在命令行中进入 target 文件夹，运行以下命令启动 Spring Boot 程序：

java -jar {project name}-{version}.jar

以上就是将前端代码在 VS Code 中，后端代码在 IDEA 中打包为 jar 包的步骤。

如果在运行 service_staff-0.0.1-SNAPSHOT.jar 文件时出现“没有主清单属性”错误，可能是缺少了可执行 JAR 的主启动类（Main-Class）配置。

你可以在 Maven 的 pom.xml 文件中，使用 maven-jar-plugin 插件来配置可执行 JAR 的主启动类。在 pom.xml 中添加以下代码：

<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-jar-plugin</artifactId>
            <version>3.2.0</version>
            <configuration>
                <archive>
                    <manifest>
                        <mainClass>com.xxx.xxx.<YourMainClass></mainClass>
                    </manifest>
                </archive>
            </configuration>
        </plugin>
    </plugins>
</build>