公司的项目是前后端分离的,后端用spring套装,前端用vue,是两个项目,最终部署时,需要把vue打的包dist文件夹的内容放到webapps目录下,然后后端项目再用maven命令打成war包。
以前的过程是这样的:

  1. 进入前端项目,执行npm run build
  2. 拷贝dist文件夹的东西到后端项目的webapps目录下
  3. 后端执行maven命令打包:clean compile package -DskipTests=true

改进后idea中执行第3步就自动完成了。下面说改进步骤:

  1. 准备一个bat文件:build-vue.bat,内容如下:
npm run build
  1. idea中setting->tools->External Tools,新增一个tool,注意Working directory属性选前端项目根路径(由于每个项目前端路径不同,所以这个tool每个项目都要建一个,否则打出来发现前端界面和项目不匹配):
    在这里插入图片描述
  2. 准备一个ant的build.xml文件放到后端项目根路径下(需要提前安装ant) ,内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<project name="before-package" default="auto-move-dist" basedir=".">	
	<target name="auto-move-dist">	
		<delete dir="${basedir}/src/main/webapp/static"/>
		<copy todir="${basedir}/src/main/webapp/" >
			<fileset dir="${basedir}/../pas-ui/dist">
			</fileset>
       </copy>
	</target>
</project>	

  1. idea中打开view->tool window->ant,然后把build.xml加进来:
    在这里插入图片描述

  2. 创建一个ant target:
    在这里插入图片描述

  3. 创建一个maven target,进行打包,并配置前置执行步骤分别执行打前端包和复制dist内容到webapps下:
    在这里插入图片描述

  4. 执行maven打包命令,等待,打包完成。
    在这里插入图片描述

Logo

前往低代码交流专区

更多推荐