使用 Maven 插件 frontend-maven-plugin 合并打包前后端分离项目

前后端分离下，前端打包后需要再手动将文件复制到后端项目的 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一键打包前端后端