思路:
通过maven管理,将前后端分离两个项目合并打包成一个jar,成为一个单体项目。springboot在install或者package打包时,调动vue打包,vue自动install和build,将生成的dist复制到spring boot后端的resources下,完成合并打包。
项目结构:
itemsplus
─ items-springBoot
─ items-vue
配置:
1、在items-vue前端项目下新建pom.xml,无需添加标签配置,新建完成选中pom右击add到maven
<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.nokia.items</groupId>
<artifactId>itemsplus</artifactId>
<version>${global.version}</version><!--改成自己项目版本-->
<relativePath>../../pom.xml</relativePath>
</parent>
<artifactId>items-vue</artifactId>
<packaging>jar</packaging>
<name>items-vue</name>
<description>items-vue for itmesplus</description>
</project>
2、在itemsplus主pom配置exec版本
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>3.0.0</version>
</plugin>
3、 配置items-springBoot后端pom
<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.nokia.itms</groupId>
<artifactId>itemsplus</artifactId>
<version>${global.version}</version>
<relativePath>../../pom.xml</relativePath>
</parent>
<artifactId>items-springBoot</artifactId>
<packaging>jar</packaging>
<name>items-springBoot</name>
<description>items-springBoot for itmsplus</description>
<properties>
<vue.project.dir>../items-vue</vue.project.dir>
</properties>
<!-- 1.clean-->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-clean-plugin</artifactId>
<configuration>
<filesets>
<fileset>
<directory>${vue.project.dir}/dist</directory>
<includes>
<include>**/*</include>
</includes>
</fileset>
<fileset>
<directory>src/main/resources/static</directory>
<includes>
<include>**/*</include>
</includes>
</fileset>
</filesets>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<executions>
<!-- 2.npm install-->
<execution>
<id>exec-npm-install</id>
<phase>initialize</phase>
<goals>
<goal>exec</goal>
</goals>
<configuration>
<executable>npm</executable>
<arguments>
<argument>install</argument>
</arguments>
<workingDirectory>${vue.project.dir}</workingDirectory>
</configuration>
</execution>
<!-- 3.npm build-->
<execution>
<id>exec-npm-run-build</id>
<phase>generate-resources</phase>
<goals>
<goal>exec</goal>
</goals>
<configuration>
<executable>npm</executable>
<arguments>
<argument>run</argument>
<argument>build:prod</argument><!--根据自己vue命令配置-->
</arguments>
<workingDirectory>${vue.project.dir}</workingDirectory>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<configuration>
<encoding>${project.build.sourceEncoding}</encoding>
</configuration>
<executions>
<!-- 4.copy to resources-->
<execution>
<id>copy iprobemgr-vue static</id>
<phase>process-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>src/main/resources/static</outputDirectory>
<overwrite>true</overwrite>
<resources>
<resource>
<directory>${vue.project.dir}/dist</directory>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
注意:
建议先参考vue通过maven自动打包成jar_码的的博客-CSDN博客_vue打包jar
items-springBoot进行install或者package即可
项目目录有变,修改pom中相应的目录路径
注意配置vue的port和后端端口一致
后端注意放开静态文件的访问