起因：看过Dubbo管控台的都知道，人家是个前后端分离的项目，可是一条打包命令能让两个项目整合在一起，我早想这样玩玩了。

1. 建立个maven父项目

next

这个作为父工程，next

Finish，然后把项目目录的src删除

2. 建立springboot子项目（Module）

next

next

这里引入模板引擎，是为了能运行前端项目，next

3. 建立前端子项目

这里就不是new Module了，而是直接在父项目根目录，用vue-cli3.0工具直接创建。

4. 先提前看一下最终项目目录（这个目录是我最后打包测试没问题的目录，所以会出现一些打包之后才会有的文件~）

5. 要实现打包整合只需要修改三个文件，即：三个pom.xml文件。

第一个，parent的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.demo</groupId>

    <artifactId>boot-vue-parent</artifactId>

    <version>1.0-SNAPSHOT</version>

    <packaging>pom</packaging>

    <modules>

        <module>boot-ui</module>

        <module>boot-server</module>

    </modules>

    <properties>

        <spring.boot.version>2.1.6.RELEASE</spring.boot.version>

        <maven.resource.version>3.1.0</maven.resource.version>

        <maven.clean.version>3.1.0</maven.clean.version>

        <maven.compiler.version>3.8.1</maven.compiler.version>

        <java.source.version>1.8</java.source.version>

        <java.target.version>1.8</java.target.version>

        <file.encoding>UTF-8</file.encoding>

        <checkstyle.skip>true</checkstyle.skip>

        <maven-checkstyle-plugin-version>3.0.0</maven-checkstyle-plugin-version>

        <jacoco-version>0.8.2</jacoco-version>

    </properties>

    <dependencyManagement>

        <dependencies>

            <dependency>

                <groupId>org.springframework.boot</groupId>

                <artifactId>spring-boot-starter-parent</artifactId>

                <version>${spring.boot.version}</version>

                <scope>import</scope>

                <type>pom</type>

            </dependency>

        </dependencies>

    </dependencyManagement>

    <profiles>

        <profile>

            <id>checkstyle</id>

            <activation>

                <jdk>[1.8,)</jdk>

            </activation>

            <build>

                <plugins>

                    <!--辅助判断代码格式是否满足规范（非必须）-->

                    <plugin>

                        <groupId>org.apache.maven.plugins</groupId>

                        <artifactId>maven-checkstyle-plugin</artifactId>

                        <version>${maven-checkstyle-plugin-version}</version>

                        <dependencies>

                            <dependency>

                                <groupId>com.puppycrawl.tools</groupId>

                                <artifactId>checkstyle</artifactId>

                                <version>8.9</version>

                            </dependency>

                        </dependencies>

                        <executions>

                            <execution>

                                <id>checkstyle-validation</id>

                                <phase>validate</phase>

                                <configuration>

                                    <configLocation>codestyle/checkstyle.xml</configLocation>

                                    <encoding>UTF-8</encoding>

                                    <consoleOutput>true</consoleOutput>

                                    <failOnViolation>true</failOnViolation>

                                </configuration>

                                <goals>

                                    <goal>check</goal>

                                </goals>

                            </execution>

                        </executions>

                    </plugin>

                    <!--Apache RAT (Release Audit Tool) 是一个用来检查软件许可证发行的准确性和高效性的工具。它的本质是：对可能出现的问题作出预测（非必须）-->

                    <plugin>

                        <groupId>org.apache.rat</groupId>

                        <artifactId>apache-rat-plugin</artifactId>

                        <version>0.12</version>

                        <executions>

                            <execution>

                                <id>verify.rat</id>

                                <phase>verify</phase>

                                <goals>

                                    <goal>check</goal>

                                </goals>

                                <configuration>

                                    <excludes>

                                        <exclude>**/*.versionsBackup</exclude>

                                        <exclude>**/.idea/</exclude>

                                        <exclude>**/*.iml</exclude>

                                        <exclude>**/*.txt</exclude>

                                        <exclude>**/*.sh</exclude>

                                        <exclude>**/*.bat</exclude>

                                        <exclude>**/*.md</exclude>

                                        <exclude>.git/</exclude>

                                        <exclude>**/*.git*</exclude>

                                        <exclude>.gitignore</exclude>

                                        <exclude>**/.settings/*</exclude>

                                        <exclude>**/.classpath</exclude>

                                        <exclude>**/*.properties</exclude>

                                        <exclude>**/.project</exclude>

                                        <exclude>**/target/**</exclude>

                                        <exclude>**/*.log</exclude>

                                        <exclude>CODE_OF_CONDUCT.md</exclude>

                                        <exclude>.codecov.yml</exclude>

                                        <exclude>.travis.yml</exclude>

                                        <exclude>PULL_REQUEST_TEMPLATE.md</exclude>

                                        <exclude>CONTRIBUTING.md</exclude>

                                        <exclude>**/codestyle/*</exclude>

                                        <exclude>**/node_modules/**</exclude>

                                        <exclude>**/.babelrc</exclude>

                                        <exclude>**/.editorconfig</exclude>

                                        <exclude>**/package-lock.json</exclude>

                                        <exclude>**/package.json</exclude>

                                        <exclude>**/OpenSans.css</exclude>

                                        <exclude>**/.eslintignore</exclude>

                                        <exclude>**/resources/META-INF/**</exclude>

                                        <exclude>**/src/main/resources/public/**</exclude>

                                        <exclude>**/src/licenses/**</exclude>

                                    </excludes>

                                </configuration>

                            </execution>

                        </executions>

                    </plugin>

                </plugins>

            </build>

        </profile>

    </profiles>

    <build>

        <plugins>

            <!--JAVA代码覆盖率工具（非必须）-->

            <plugin>

                <groupId>org.jacoco</groupId>

                <artifactId>jacoco-maven-plugin</artifactId>

                <version>${jacoco-version}</version>

                <executions>

                    <execution>

                        <goals>

                            <goal>prepare-agent</goal>

                        </goals>

                    </execution>

                    <execution>

                        <id>report</id>

                        <phase>test</phase>

                        <goals>

                            <goal>report</goal>

                        </goals>

                    </execution>

                </executions>

            </plugin>

            <!--编译插件-->

            <plugin>

                <groupId>org.apache.maven.plugins</groupId>

                <artifactId>maven-compiler-plugin</artifactId>

                <version>${maven.compiler.version}</version>

                <configuration>

                    <source>${java.source.version}</source>

                    <target>${java.target.version}</target>

                    <encoding>${file.encoding}</encoding>

                </configuration>

            </plugin>

        </plugins>

    </build>

</project>

第二个，springboot项目的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>

    <parent>

        <groupId>com.demo</groupId>

        <artifactId>boot-vue-parent</artifactId>

        <version>1.0-SNAPSHOT</version>

    </parent>

    <artifactId>boot-server</artifactId>

    <properties>

        <java.version>1.8</java.version>

    </properties>

    <dependencies>

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-web</artifactId>

        </dependency>

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-thymeleaf</artifactId>

        </dependency>

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-test</artifactId>

            <scope>test</scope>

        </dependency>

    </dependencies>

    <build>

        <plugins>

            <plugin>

                <groupId>org.springframework.boot</groupId>

                <artifactId>spring-boot-maven-plugin</artifactId>

                <version>${spring.boot.version}</version>

                <!--解决打包后，执行java -jar 命令，找不到主清单属性-->

                <executions>

                    <execution>

                        <phase>package</phase>

                        <goals>

                            <goal>repackage</goal>

                        </goals>

                    </execution>

                </executions>

            </plugin>

            <!--clean插件-->

            <plugin>

                <groupId>org.apache.maven.plugins</groupId>

                <artifactId>maven-clean-plugin</artifactId>

                <version>${maven.clean.version}</version>

                <configuration>

                    <filesets>

                        <fileset>

                            <directory>src/main/resources/static</directory>

                        </fileset>

                        <fileset>

                            <directory>src/main/resources/templates</directory>

                        </fileset>

                    </filesets>

                </configuration>

            </plugin>

            <!--资源插件，主要为了从前端项目里复制打包好的文件到springboot项目-->

            <plugin>

                <groupId>org.apache.maven.plugins</groupId>

                <artifactId>maven-resources-plugin</artifactId>

                <version>${maven.resource.version}</version>

                <executions>

                    <execution>

                        <id>copy static</id>

                        <phase>generate-resources</phase>

                        <goals>

                            <goal>copy-resources</goal>

                        </goals>

                        <configuration>

                            <outputDirectory>src/main/resources/static</outputDirectory>

                            <overwrite>true</overwrite>

                            <resources>

                                <resource>

                                    <!--因为vue-cli打包的目录在项目的根目录，所以从这里复制-->

                                    <directory>${project.parent.basedir}/boot-ui/dist</directory>

                                    <includes>

                                        <include>css/</include>

                                        <include>img/</include>

                                        <include>js/</include>

                                        <include>favicon.ico</include>

                                    </includes>

                                </resource>

                            </resources>

                        </configuration>

                    </execution>

                    <execution>

                        <id>copy template</id>

                        <phase>generate-resources</phase>

                        <goals>

                            <goal>copy-resources</goal>

                        </goals>

                        <configuration>

                            <outputDirectory>src/main/resources/templates</outputDirectory>

                            <overwrite>true</overwrite>

                            <resources>

                                <resource>

                                    <!--因为vue-cli打包的目录在项目的根目录，所以从这里复制-->

                                    <directory>${project.parent.basedir}/boot-ui/dist</directory>

                                    <includes>

                                        <include>index.html</include>

                                    </includes>

                                </resource>

                            </resources>

                        </configuration>

                    </execution>

                </executions>

            </plugin>

        </plugins>

    </build>

</project>

最后一个，vue项目里新添加的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>

        <groupId>com.demo</groupId>

        <artifactId>boot-vue-parent</artifactId>

        <version>1.0-SNAPSHOT</version>

    </parent>

    <modelVersion>4.0.0</modelVersion>

    <artifactId>boot-ui</artifactId>

    <properties>

        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

        <java.version>1.8</java.version>

        <frontend-maven-plugin.version>1.6</frontend-maven-plugin.version>

    </properties>

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

                <executions>

                    <execution>

                        <id>install node and npm</id>

                        <goals>

                            <goal>install-node-and-npm</goal>

                        </goals>

                        <configuration>

                            <nodeVersion>v10.16.0</nodeVersion>

                            <npmVersion>6.9.0</npmVersion>

                        </configuration>

                    </execution>

                    <!-- Install all project dependencies -->

                    <execution>

                        <id>npm install</id>

                        <goals>

                            <goal>npm</goal>

                        </goals>

                        <!-- optional: default phase is "generate-resources" -->

                        <phase>generate-resources</phase>

                        <!-- Optional configuration which provides for running any npm command -->

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

6. 解释一下

最重要的插件就两个，一个是springboot项目里的maven-resources-plugin，另一个是vue项目里的frontend-maven-plugin。

资源插件的复制路径很好理解，vue-cli3.0打包的目录如图所示

而我们要在springboot项目里运行，就要把index.html文件复制到templates目录，其他文件复制到static目录。

7. 打包运行。

mvn clean package -Dmaven.test.skip=true

进入根目录，执行打包命令

..

进入server的target目录，执行java -jar命令

访问：

完成 https://github.com/Mysakura/boot-vue-parent

8. 引申 frontend-maven-plugin

这个插件不仅仅支持node+npm，还支持node+yarn。这里我也写了个例子 https://github.com/Mysakura/frontend-maven-plugin-demo

boot-ui项目的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>

        <groupId>com.example</groupId>

        <artifactId>boot-vue-parent</artifactId>

        <version>1.0-SNAPSHOT</version>

    </parent>

    <modelVersion>4.0.0</modelVersion>

    <artifactId>boot-ui</artifactId>

    <properties>

        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

        <java.version>1.8</java.version>

        <frontend-maven-plugin.version>1.7.6</frontend-maven-plugin.version>

    </properties>

    <build>

        <plugins>

            <!--安装node和npm的情况-->

            <!--<plugin>-->

                <!--<groupId>com.github.eirslett</groupId>-->

                <!--<artifactId>frontend-maven-plugin</artifactId>-->

                <!--<version>${frontend-maven-plugin.version}</version>-->

                <!--<executions>-->

                    <!--<execution>-->

                        <!--<id>install node and npm</id>-->

                        <!--<goals>-->

                            <!--<goal>install-node-and-npm</goal>-->

                        <!--</goals>-->

                        <!--<configuration>-->

                            <!--<nodeVersion>v10.16.0</nodeVersion>-->

                            <!--<npmVersion>6.9.0</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>-->

            <!--安装node和yarn的情况-->

            <plugin>

                <groupId>com.github.eirslett</groupId>

                <artifactId>frontend-maven-plugin</artifactId>

                <version>${frontend-maven-plugin.version}</version>

                <executions>

                    <execution>

                        <id>install node and yarn</id>

                        <goals>

                            <goal>install-node-and-yarn</goal>

                        </goals>

                        <phase>generate-resources</phase>

                        <configuration>

                            <nodeVersion>v10.16.0</nodeVersion>

                            <yarnVersion>v1.13.0</yarnVersion>

                        </configuration>

                    </execution>

                    <!-- Install all project dependencies -->

                    <execution>

                        <id>yarn install</id>

                        <goals>

                            <goal>yarn</goal>

                        </goals>

                        <configuration>

                            <arguments>install</arguments>

                        </configuration>

                    </execution>

                    <!-- Build and minify static files -->

                    <execution>

                        <id>yarn run build</id>

                        <goals>

                            <goal>yarn</goal>

                        </goals>

                        <configuration>

                            <arguments>run build</arguments>

                        </configuration>

                    </execution>

                </executions>

            </plugin>

        </plugins>

    </build>

</project>

　　

SpringBoot+Vue前后端分离项目，maven package自动打包整合的更多相关文章

  1. Springboot+vue前后端分离项目，poi导出excel提供用户下载的解决方案

    因为我们做的是前后端分离项目 无法采用response.write直接将文件流写出 我们采用阿里云oss 进行保存 再返回的结果对象里面保存我们的文件地址 废话不多说,上代码 Springboot 第 ...

  2. SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题

    原文链接:https://segmentfault.com/a/1190000012879279 当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理 ...

  3. 喜大普奔，两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了

    折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...

  4. 两个开源的 Spring Boot + Vue 前后端分离项目

    折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...

  5. Jeecg-Boot 2.0 版本发布，基于Springboot+Vue 前后端分离快速开发平台

    目录 Jeecg-Boot项目简介 源码下载 升级日志 Issues解决 v1.1升级到v2.0不兼容地方 系统截图 Jeecg-Boot项目简介 Jeecg-boot 是一款基于代码生成器的智能开发 ...

  6. SpringBoot +Vue 前后端分离实例

    今天下了Vue,想试一试前后端分离的实现,没想到坑还不少,这里就记录一下我遇到的坑和我的代码: 一.Vue的下载安装:从网上找就好了,没什么问题,除了下载以后,要把镜像库改成淘宝的,要不然太慢了. 二 ...

  7. springboot + mybatis 前后端分离项目的搭建 适合在学习中的大学生

    人生如戏,戏子多半掉泪! 我是一名大四学生,刚进入一家软件件公司实习,虽说在大学中做过好多个实训项目,都是自己完成,没有组员的配合.但是在这一个月的实习中,我从以前别人教走到了现在的自学,成长很多. ...

  8. SpringBoot,Vue前后端分离开发首秀

    需求:读取数据库的数据展现到前端页面 技术栈:后端有主要有SpringBoot,lombok,SpringData JPA,Swagger,跨域,前端有Vue和axios 不了解这些技术的可以去入门一 ...

  9. SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(一)

    当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异. 笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方 ...

随机推荐

  1. Git git2.8.1客户端安装教程

    Git git2.8.1客户端安装教程 一 Git介绍 git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. 分布式相比于集中式的最大区别在于开发者可以提交到本地,每个开 ...

  2. 22-1 web传输视频 Opencv+usb摄像头 树莓派+Flask实现视频流媒体WEB服务器

    第一篇 讲解原理 https://blog.miguelgrinberg.com/post/video-streaming-with-flask 第二篇 加入多线程可以直接用 https://gith ...

  3. 项目（1-2）ES32获取mpu9250传入数据库

    . 报一个错,找不到min函数 #define min(X,Y) ((X) < (Y) ? (X) : (Y)) 手动添加 之后不报错了 .最原始的采集 /******************* ...

  4. python 当前时间多加一天、一小时、一分钟（转载）

    首先看下,datetime的使用 import datetime >>> print datetime.datetime.now() 2017-07-15 15:01:24.6190 ...

  5. JDBC-select练习&jdbc工具类&数据库登录案例

    一.select练习 1.说明 练习: * 定义一个方法,查询emp表的数据将其封装为对象,然后装载集合,返回. 1. 定义Emp类 2. 定义方法 public List<Emp> fi ...

  6. nginx之TCP反向代理

    实现Nginx tcp负载均衡 Nginx在1.9.0版本开始支持tcp模式的负载均衡,在1.9.13版本开始支持udp协议的负载,udp主要用于DNS的域名解析,其配置方式和指令和http 代理类似 ...

  7. ERA-Interim数据学习

    1.气象再分析数据有很多种,看文献里用到的主要有这几种 ECWRF——ERA-Interim,分辨率0.125°,欧洲的 MERRA-2,分辨率0.625°*0.5°,NASA的 GEOS-5FP,分 ...

  8. Android Studio 之 Activity 的生命周期

    翻转屏幕,会重新加载Activity package com.example.activitylivecycle; import android.os.Bundle; import android.u ...

  9. 咏南跨平台中间件REST API

    主旨 1)为了中间件支持跨操作系统部署,客户端支持跨操作系统.跨设备.跨开发语言,特制订本REST API规约. 2)所有接口均支持HTTP GET\POST调用. 3)调用示例为DELPHI代码,其 ...

  10. 通过mitmproxy爬取APP的数据

    安装: https://mitmproxy.org/ 小米安装证书 设置->系统安全->从存储设备安装->选择*.pem文件 模拟器安装证书 (请从C:\Users\John\.mi ...