您现在的位置是:首页 >学无止境 >springboot+vue前后端分离项目打包成jar包及运行网站首页学无止境

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

B64A-消闲 2023-07-10 08:00:03
简介springboot+vue前后端分离项目打包成jar包及运行

将 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>

其中, 是你的可执行 JAR 的主启动类的完整类名。

完成上述配置后,重新执行 mvn package 命令打包,如果打包成功,会在 target 目录下生成带有可执行 JAR 的主启动类的 service_staff-0.0.1-SNAPSHOT.jar 文件。

在这里插入图片描述

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。