系列文章目录
从前后端分离到前后端整合的“退步”(一)项目结构
从前后端分离到前后端整合的“退步”(二)pom.xml文件配置
Spring Boot + Vue 使用Maven进行打包发布(二)pom.xml文件配置
前言
本文仅是针对笔者操作的一个记录,以便以后使用。也希望可以对更多的同好们有所帮助。
现在前后端分离十分流行,最近在有接触到了前后端一起使用Maven进行打为jar包的项目,于是今天进行实际的操作一下,以下是本次的记录。
众所周知Maven是一个项目管理工具,可以对 Java 项目进行构建、依赖管理。Maven 也可被用于构建和管理各种项目,例如 C#,Ruby,Scala 和其他语言编写的项目。那么我们也可以使用他构建一个前后端打包为一个jar包的项目。
使用的技术为 Spring Boot
+Vue
本文只是pom文件的配置,需要构建项目结构的可以移步系列文章第一篇
在xml文件中有写了相应的注释,可以根据注释进行理解。
一、pom.xml文件是什么?
pom是Project Object Model(项目对象模型)的缩写,是Maven中的项目文件,可用于管理与配置依赖,组织信息,项目授权,远程仓库等等.一个Maven项目,可以没有任何代码,但不能没有pom.xml.
二、配置步骤
1.父项目 pom.xml 文件的配置
笔者加入了一些因个人使用而引入的依赖,可根据具体使用增删。
某些依赖获取较慢,可利用技术手段连接进行加载。
<?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.along.model</groupId>
<artifactId>SpringModel</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>pom</packaging>
<modules>
<!-- spring boot后端工程,作为子工程 -->
<module>Backend</module>
<!-- Vue前端工程,作为子工程 -->
<module>Frontend</module>
</modules>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.5</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<java.version>1.8</java.version>
<frontend-maven-plugin.version>1.12.0</frontend-maven-plugin.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
</properties>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
</plugins>
</build>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-autoconfigure</artifactId>
<version>2.5.5</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--mybatisplus-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.2</version>
</dependency>
<!-- mysql相关-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
</dependencies>
</project>
2.后端子项目 backend :pom.xml 文件的配置
<?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>SpringModel</artifactId>
<groupId>com.along.model</groupId>
<version>1.0-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>Backend</artifactId>
<version>1.0-SNAPSHOT</version>
<name>backend</name>
<description>Demo project for Spring Boot</description>
<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}/Frontend/dist</directory>
</fileset>
</filesets>
</configuration>
</plugin>
<!--资源插件,主要为了从前端项目里复制打包好的文件到springboot项目-->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>3.1.0</version>
<executions>
<execution>
<id>copy Vue Frontend content</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}/Frontend/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>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<executions>
<execution>
<goals>
<!--可以把依赖的包都打包到生成的Jar包中-->
<goal>repackage</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
3.前端子项目 frontend :pom.xml 文件的配置
<?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>SpringModel</artifactId>
<groupId>com.along.model</groupId>
<version>1.0-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>Frontend</artifactId>
<version>1.0-SNAPSHOT</version>
<build>
<plugins>
<!--frontend-maven-plugin为项目本地下载/安装Node和NPM,运行npm install命令-->
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>${frontend-maven-plugin.version}</version>
<configuration>
<workingDirectory>${project.parent.basedir}/frontend</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>
</plugins>
</build>
</project>
总结
本篇文章只是笔者对于个人需要的一个记录,开始目的是以后在需要的时候可以及时的找到,当然也希望能够为更多的同好们提供到便利。