使用 Maven 插件 frontend-maven-plugin 合并打包前后端分离项目
前后端分离下,前端打包后需要再手动将文件复制到后端项目的 src/main/resources/static 目录下,最后打包后端项目。这里使用 Maven 插件 frontend-maven-plugin 来自动进行前后端合并打包。下面以 Spring Boot + Vue 为例:项目结构最外层pom.xml,注意将前端项目放前面<?xml version="1.0" encoding="
前后端分离下,前端打包后需要再手动将文件复制到后端项目的 src/main/resources/static 目录下,最后打包后端项目。这里使用 Maven 插件 frontend-maven-plugin 进行前后端合并打包。
下面以 Spring Boot + Vue 为例:
GitHub shpunishment/spring-boot-vue-demo
项目结构
最外层pom.xml,注意modules中将前端项目放前面
<?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.shpun</groupId>
<artifactId>spring-boot-vue-test</artifactId>
<packaging>pom</packaging>
<version>0.0.1-SNAPSHOT</version>
<modules>
<module>user-frontend</module>
<module>user-api</module>
</modules>
</project>
以下均在前端项目下修改:
在 src/utils 下创建文件cleanFile.js,fileCopy.js,fileUtils.js
cleanFile.js:用于打包前删除包
const fs = require('fs')
const p = require('path')
const nodeModulesPath = p.join(__dirname, '../../node_modules')
const lockJsonPath = p.join(__dirname, '../../package-lock.json')
if (fs.existsSync(nodeModulesPath)) {
const fileUtil = require('./fileUtil')
fileUtil.deleteFolderByRimraf(nodeModulesPath)
console.log('删除 node_modules 成功!')
fileUtil.deleteFile(lockJsonPath)
console.log('删除 package-lock.json 成功!')
}
fileCopy.js:将前端打包后的文件复制到后端项目 src/main/resources/static 下
const fileUtil = require('./fileUtil')
// 后端项目的文件夹名称,这里是 user-api
const backendProjectName = 'user-api'
// 目标文件夹
const staticDirectory = '../' + backendProjectName + '/src/main/resources/static/'
// 删除
fileUtil.deleteFolder(staticDirectory)
// 拷贝
fileUtil.copyFolder('./dist', staticDirectory)
console.log('文件拷贝成功!')
fileUtils.js:文件操作工具
const fs = require('fs')
const rimraf = require('rimraf');
/**
* 删除文件夹
* @param path
*/
function deleteFolder (path) {
let files = [];
if (fs.existsSync(path)) {
if (fs.statSync(path).isDirectory()) {
files = fs.readdirSync(path)
files.forEach((file) => {
const curPath = path + '/' + file;
if (fs.statSync(curPath).isDirectory()) {
deleteFolder(curPath)
} else {
fs.unlinkSync(curPath)
}
})
fs.rmdirSync(path)
} else {
fs.unlinkSync(path)
}
}
}
/**
* 使用 rimraf 删除文件夹
* @param path
*/
function deleteFolderByRimraf (path) {
rimraf(path, (err) => {
if (err) {
console.log(err)
}
})
}
/**
* 删除文件
* @param path
*/
function deleteFile (path) {
if (fs.existsSync(path)) {
if (fs.statSync(path).isDirectory()) {
deleteFolder(path)
} else {
fs.unlinkSync(path)
}
}
}
/**
* 复制文件夹到指定目录
* @param from
* @param to
*/
function copyFolder (from, to) {
let files = []
// 文件是否存在 如果不存在则创建
if (fs.existsSync(to)) {
files = fs.readdirSync(from)
files.forEach((file) => {
const targetPath = from + '/' + file;
const toPath = to + '/' + file;
// 复制文件夹
if (fs.statSync(targetPath).isDirectory()) {
copyFolder(targetPath, toPath)
} else {
// 拷贝文件
fs.copyFileSync(targetPath, toPath)
}
})
} else {
fs.mkdirSync(to)
copyFolder(from, to)
}
}
module.exports = {
deleteFolder,
deleteFolderByRimraf,
deleteFile,
copyFolder
}
修改package.json,添加脚本
{
...
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"clean": "node src/utils/cleanFiles.js",
"build-copy": "vue-cli-service build && node src/utils/fileCopy.js"
},
...
}
修改前端项目 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.shpun</groupId>
<artifactId>user-frontend</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>pom</packaging>
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.8.0</version>
<executions>
<!-- 检查是否安装node npm -->
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<phase>generate-resources</phase>
</execution>
<!-- 安装rimraf -->
<execution>
<id>npm install rimraf</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>install rimraf --registry=https://registry.npm.taobao.org</arguments>
</configuration>
</execution>
<!-- 执行脚本,删除node_modules和package-lock.json -->
<execution>
<id>npm run clean</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>run clean</arguments>
</configuration>
</execution>
<!-- npm install -->
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>install --registry=https://registry.npm.taobao.org</arguments>
</configuration>
</execution>
<!-- build 之后复制文件到 src/main/resource/static 下 -->
<execution>
<id>npm run build</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>run build-copy</arguments>
</configuration>
</execution>
</executions>
<configuration>
<nodeVersion>v10.16.3</nodeVersion>
<npmVersion>6.11.3</npmVersion>
<!-- node安装路径 -->
<installDirectory>${settings.localRepository}</installDirectory>
<!-- 前端代码路径 -->
<workingDirectory>${basedir}</workingDirectory>
</configuration>
</plugin>
</plugins>
</build>
</project>
测试
在最外层执行mvn clean install
,按序执行命令
检查node和npm是否安装
安装rimraf
执行脚本,删除node_modules和package-lock.json
npm install
build 之后复制文件到 src/main/resource/static 下
参考:
GitHub eirslett/frontend-maven-plugin
Spring Boot + Vue前后端分离项目,Maven自动打包整合
使用插件 frontend-maven-plugin,通过maven一键打包前端后端
更多推荐
所有评论(0)