背景
项目中后台代码用的SpringBoot,前端代码用的Vue,现在想放到一个项目中 用maven管理
代码结构
总结构大概如下:
- all
- backend
- pom.xml
- frontend
- pom.xml
- pom.xml
思路
- 编译前端代码
- 复制编译好的前端文件到后台代码
- 编译后台代码
pom
主工程
<modules> <module>frontend</module> <module>backend</module> </modules>
|
主要是写好模块 指定顺序
frontend
<build> <plugins> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.6</version> <executions> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> <configuration> <nodeVersion>v10.12.0</nodeVersion> <npmVersion>6.4.1</npmVersion> </configuration> </execution> <execution> <id>npm install webpack</id> <goals> <goal>npm</goal> </goals> <phase>generate-resources</phase> <configuration> <arguments>install webpack -g</arguments> </configuration> </execution> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> <phase>generate-resources</phase> <configuration> <arguments>install</arguments> </configuration> </execution> <execution> <id>npm run build</id> <goals> <goal>npm</goal> </goals> <phase>generate-resources</phase> <configuration> <arguments>run build</arguments> </configuration> </execution> </executions> </plugin> </plugins> </build>
|
主要是利用frontend-maven-plugin插件进行一系列的操作:
- 1.安装nodejs和npm命令
- 2.安装webpack
- 3.安装项目依赖
- 4.编译项目
backend
<build> <plugins> <plugin> <artifactId>maven-resources-plugin</artifactId> <executions> <execution> <id>copy frontend content</id> <phase>generate-resources</phase> <goals> <goal>copy-resources</goal> </goals> <configuration> <outputDirectory>src/main/resources/static/</outputDirectory> <overwrite>true</overwrite> <resources> <resource> <directory>${project.parent.basedir}/frontend/target/dist</directory> <filtering>false</filtering> <includes> <include>**/*</include> </includes> </resource> </resources> </configuration> </execution> </executions> </plugin> </plugins> </build>
|
主要是利用frontend-maven-plugin插件,将编译好的前端文件复制到后台代码指定目录中
结果
至此,即可完成需求
根目录下执行mvn package即可编译完整项目