前面的文章有讲过前端和后端分开部署的文章
前端分离部署
后端分离部署
当前用的jboss版本是wildfly-18.0.1.Final
项目背景
maven管理springboot项目，创建了frontend和backend后端两个模块。前端是vue，后端是springboot，其他的模块是相关的业务功能模块
项目根目录处理pom
由于项目是maven管理，根目录以及各个子模块都有pom.xml，我们安装打包就在各个要打包的pom.xml写上相关插件信息即可。
首先根目录下的pom，需要把hr-fronted和hr-backend都写入。如果前后端分离其实可以不用写hr-fontend，因后端没有引用到。现在我们要前后端打成一个包就需要写在一起。
<?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.company</groupId>
<artifactId>hr</artifactId>
<version>1.86.6</version>
<packaging>pom</packaging>
<name>hr</name>
<description>hr project powered by booster</description>
<modules>
<module>hr-backend</module>
<module>hr-frontend</module>
<!--xxx-auth这个不用管它，因为项目hr-backend引用了这个模块才需要在这里引入-->
<module>xxx-auth</module>
</modules>
</project>前端 hr-fronted的配置处理
pom.xml
下面的plugins作用是生成vue的dist包，npm install、npm clean 、npm run build通过执行语句来生成dist包。
<?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>
<parent>
<groupId>com.company</groupId>
<artifactId>hr</artifactId>
<version>1.86.6</version>
</parent>
<groupId>com.company</groupId>
<artifactId>hr-frontend</artifactId>
<version>1.0.0</version>
<packaging>jar</packaging>
<name>hr-frontend</name>
<description>hr-frontend powered by </description>
<build>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.6.0</version>
<executions>
<execution>
<id>npm-install</id>
<goals>
<goal>exec</goal>
</goals>
<phase>initialize</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>install</argument>
<argument>--loglevel</argument>
<argument>verbose</argument>
</arguments>
<outputFile/>
</configuration>
</execution>
<execution>
<id>npm-clean</id>
<goals>
<goal>exec</goal>
</goals>
<phase>initialize</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>run</argument>
<argument>clean</argument>
</arguments>
<outputFile/>
</configuration>
</execution>
<execution>
<id>npm-run-build</id>
<goals>
<goal>exec</goal>
</goals>
<phase>compile</phase>
<configuration>
<executable>npm</executable>
<arguments>
<argument>run</argument>
<argument>build</argument>
</arguments>
<outputFile/>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>后端pom，打包为war包，并表明web的路径webResources
<build>
<finalName>${project.artifactId}-${project.version}</finalName>
<plugins>
<!--以Maven的方式为应用提供Spring Boot的支持-->
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>${springboot.version}</version>
<configuration>
<mainClass>com.foresealife.hr.Application</mainClass>
</configuration>
<executions>
<execution>
<goals>
<goal>repackage</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>3.0.0</version>
<configuration>
<webResources>
<resource>
<directory>${project.parent.basedir}/hr-frontend/dist</directory>
</resource>
</webResources>
<failOnMissingWebXml>false</failOnMissingWebXml>
<warName>hr</warName>
</configuration>
</plugin>
<!-- 打包发布时，跳过单元测试 -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-surefire-plugin</artifactId>
<configuration>
<skipTests>true</skipTests>
</configuration>
</plugin>
</plugins>
</build>后端的 application.properties
加个上下文路径
server.servlet.context-path=/hr
前端配置一下vue.config.js
.....
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
//baseUrl: process.env.NODE_ENV === 'production'
? './' // production base url.
: '/',
........
}publicPath生产模式下为何使用./ 而不是 / ，是有原因，可以看打包后dist的index.html，加载的js css如果不写相对路径就会找不到内容
可看这篇文章
然后在项目总的根目录下（即第一张截图）执行 mvn clean install
就会在hr-backend的target下生成hr.war包，打开war的内容生成内容是这样的。
外面是vue打包的内容，后端的内容会打包再web-inf里面。
然后把这个war包放到jboss的 xxxx\wildfly-18.0.1.Final\standalone\deployments目录下，然后双击E:\installtion\server\wildfly-18.0.1.Final\bin\standalone.bat进行启动应用即可
访问路径为http://localhost:8080/hr/
可能有人疑问为什么要/hr/，这是因为打的war包是这个名字，启动项目后默认war名字为访问路径前缀。也因为这样，前端访问后端的接口都要加个/hr
注意自己的前端接口调用要写个hr，因为现在前后端访问都要/hr/， 如果接口已经写了很多，来不及加/hr ，一般我们也可以新建个HTTPRequest.js专门来管理接口请求，里面写axios相关的信息
...........
const conf = {
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
timeout: 60000, // 超时时间
baseURL: process.env.NODE_ENV === 'production'
? '/hr' // production base url
: '/hr' // development base url
}
const instance = Axios.create(conf)
..........访问时需要加前缀，前缀后面接的地址就是你自己平常访问的链接内容了。比如我平常本地访问的路径为http://localhost:8080/#/login，那么此时就是http://localhost:8080/hr/#/login
.----------------------
如果对于访问链接是有个前缀hr 看着非常碍眼的话，需要改动几个配置文件
1 前端配置接口访问路径去掉hr，及httpRequest.js去掉整个baseUrl
...........
const conf = {
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
timeout: 60000 // 超时时间
}
const instance = Axios.create(conf)
..........2后端需要加个配置文件，在子模块hr-backend新建文件夹及文件 xxxxx\hr-compay\hr-backend\src\main\webapp\WEB-INF\jboss-web.xml这样打包的文件就会在war包目录下的\WEB-INF\jboss-web.xml
该jboss-web.xml内容为
<?xml version="1.0" encoding="UTF-8"?>
<jboss-web>
<context-root></context-root>
</jboss-web>代表不需要jboss访问链接不需要上下文
然后重新打包部署即可。访问链接为 locahost:8080
