SpringBoot和VUE前后端合并自动打包成jar

思路：

        通过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和后端端口一致

        后端注意放开静态文件的访问