玩过最新版Dubbo管控台的都知道，人家是个前后端分离的项目，可是一条打包命令能让两个项目整合在一起，生成一个jar包，这样的好处显而易见，部署的时候服务器不需要安装node环境单独部署前端项目，或者也不需要在写完前端代码后，手动打包前端项目再将js文件拷贝到SpringBoot目录下面。其实，我早想这样玩玩了。下面就看怎么玩？

一、dubbo-admin简介

新版dubbo管控台github地址：https://github.com/apache/dubbo-admin

dubbo-admin前端使用Vue.js作为javascript框架，Vuetify作为UI框架；后端为标准spring boot工程。

他的生产环境部署方式

1. 下载代码: git clone https://github.com/apache/dubbo-admin.git

2. 在 dubbo-admin-server/src/main/resources/application.properties中指定注册中心地址

3. 构建mvn clean package

4. 启动mvn --projects dubbo-admin-server spring-boot:ru

5. 访问 http://localhost:8080

``构建只需要一条命令，奥妙在哪里呢？我们接下里进行实操。

二、前后端项目工程结构改造

建立父工程的原因是为了使IDEA可以同时管理后端和前端项目，父工程只需要一个文件夹，里面弄个pom.xml文件即可。了解过maven父子工程的同学应该很容易理解，我们已前后端分离的老项目为例进行改造。

1.在IDEA中新建maven父工程

这个父工程只需要有一个pom.xml文件就可以了，不要去勾选骨架

接着设置父工程的属性

然后完成即可

2.导入已存在的后端工程

将后端工程检出或拷贝到父工程的目录下

打开父工程的工程结构

切换到Modules选项，更改jdk的版本为8

找到你父工程目录下的后端项目，进行模块添加

将后端项目作为maven项目导入

点击finish即可

3.导入已存在的前端工程

将后端工程检出或拷贝到父工程的目录下

找到你的前端项目，进行模块添加

完成后的这一步非常关键，选择创建模块

剩余步骤直接点就可以了。

最终效果

工程改造完成，总结一下，只是新建了一个父工程，将原来的项目移到这个父工程下即可

三、进行三个工程的maven打包配置

我们完全可以照着dubbo-admin工程的maven配置进行改造，主要的改动有：

• 在父工程中指定子工程模块

• 子工程指定父工程坐标

• 后端子工程添加相应的maven插件

• 后端子工程指定要拷贝到源地址和目标地址

• 前端子工程也添加响应的maven插件

• 前端安装node和npm

1.父工程maven配置

<?xml  version="1.0" encoding="UTF-8"?>4.0.0org.springframework.bootspring-boot-starter-parent2.1.8.RELEASEcom.anymkparent-boot-vue1.0-SNAPSHOTcsdn-readerconstruction-datapom2.1.6.RELEASE3.1.03.1.03.8.11.81.8UTF-8true3.0.00.8.2org.apache.maven.pluginsmaven-compiler-plugin${maven.compiler.version}${java.source.version}${java.target.version}${file.encoding}

2.SpringBoot工程maven配置

<?xml  version="1.0" encoding="UTF-8"?>4.0.0com.anymkparent-boot-vue1.0-SNAPSHOTcsdn-reader1.82.1.8.RELEASE3.1.03.1.03.8.11.81.8UTF-8org.springframework.bootspring-boot-starter-weborg.springframework.bootspring-boot-starter-testtestorg.apache.httpcomponentshttpclient4.5.8com.alibabafastjson1.2.54org.jsoupjsoup1.12.1org.projectlomboklombok1.18.10mysqlmysql-connector-java5.1.48com.baomidoumybatis-plus-boot-starter3.2.0com.alibabadruid1.1.12org.springframework.bootspring-boot-maven-plugin${spring.boot.version}packagerepackageorg.apache.maven.pluginsmaven-clean-plugin${maven.clean.version}src/main/resources/staticsrc/main/resources/templatesorg.apache.maven.pluginsmaven-resources-plugin${maven.resource.version}copy staticgenerate-resourcescopy-resourcessrc/main/resources/statictrue${project.parent.basedir}/construction-data/distcss/img/js/favicon.icocopy templategenerate-resourcescopy-resourcessrc/main/resources/templatestrue${project.parent.basedir}/construction-data/distindex.html

3.Vue工程maven配置

vue项目里新添加的pom.xml文件

<?xml  version="1.0" encoding="UTF-8"?>com.anymkparent-boot-vue1.0-SNAPSHOT4.0.0construction-dataUTF-8UTF-81.81.6com.github.eirslettfrontend-maven-plugin${frontend-maven-plugin.version}install node and npminstall-node-and-npmv10.16.06.9.0npm installnpmgenerate-resourcesinstallnpm run buildnpmrun build

4.maven插件作用讲解

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

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

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

四、 打包运行

1.运行前确保自己的node环境已经安装

事实证明我是想多了，插件里面已经进行了配置，不会使用本地的node环境，而是会去网上重新下载一个node，这样是有好处的，一个不懂node的后端工程师，本地不需要安装node，也可以将这个项目打包成功。在Mac和Linux的开发中，也不需要安装node。

2. 进入父工程根目录，执行打包命令

mvn clean package -Dmaven.test.skip=true

3.打包成功

4.查看最终的jar包

找到本地的这个jar包，用解压缩工具查看静态资源有没有被打包进去

5、安装过程中出现的错误

错误一、

在前端打包的过程中，还是出现了问题的，主要为打包程序并没有用本地的node，而是去网上直接下载了一个node.exe，该文件的位置为：

D:\parent-boot-vue\construction-data\node\node.exe

这个配置在哪里呢，是我们在pom.xml中进行了指定，包括node和npm的版本：

在此过程中，报错如下：

看报错日志，大致意思为下载下来的node文件有问题，于是我手动下载了一个，地址为：

https://nodejs.org/dist/v10.16.0/win-x64/node.exe

然后再拷贝到D:\parent-boot-vue\construction-data\node目录去替换原来的node.exe文件，再次运行就完美。

ps：因为网络原因，可能执行命令时卡顿、报错，可以多尝试执行几次。

错误二、父工程找不到子工程的问题

我最开始没有将子工程放到父工程的目录下，所以打包时找不到子工程，后面将子工程进行拷贝问题就解决了。

错误三、index.html没有被拷贝的问题

后端maven配置错误，没有配置正确的源地址和目标地址，画红线的地方一定要注意

五、frontend-maven-plugin插件的扩展

这个插件不仅仅支持node+npm，还支持node+yarn。

ui项目的pom.xml文件

```html
<?xml  version="1.0" encoding="UTF-8"?>com.exampleboot-vue-parent1.0-SNAPSHOT4.0.0boot-uiUTF-8UTF-81.81.7.6com.github.eirslettfrontend-maven-plugin${frontend-maven-plugin.version}install node and yarninstall-node-and-yarngenerate-resourcesv10.16.0v1.13.0yarn installyarninstallyarn run buildyarnrun build```

一定要多看报错日志，不能轻言放弃！

面对敌人的严刑逼供，我一个字也没说，而是一五一十写了下来。

最后，非常感谢小LUA大大帖子对我的帮助，没有你的指引，我是无法完成这个配置的。也感谢dubbo-admin项目，大家可以参考该项目的配置。其实上面的配置都是从该项目中拷贝过来的，哈哈。

打包命令：mvn clean package -Dmaven.test.skip=true

参考资料：

1. https://www.cnblogs.com/LUA123/p/11189069.html