SpringBoot 集成 React 一体化打包部署

从 POM 文件开始

其实 gradle 也是大同小异, 就不再一一介绍了, 就从 maven 文件下手吧

其实最关键的就是在已有的 SpringBoot 项目中, 添加一个整合 React 的 plugin.

这个 plugin 的名称就是 frontend-maven-plugin, 配置安装 node/npm/webpack:

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.2</version>
    <configuration>
        <installDirectory>target</installDirectory>
    </configuration>
    <executions>
        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
                <nodeVersion>v6.2.1</nodeVersion>
                <npmVersion>3.9.3</npmVersion>
            </configuration>
        </execution>
        <execution>
            <id>npm install</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>install</arguments>
            </configuration>
        </execution>
        <execution>
            <id>build</id>
            <goals>
                <goal>webpack</goal>
            </goals>
        </execution>
    </executions>
</plugin>

剩下的就是配置 webpack了, 指定入口文件和编译器是关键. 这样在 spring-boot:run 的时候, 就会执行 build, 也就是 webpack 的 build, 会将你指定的路径文件, 编译到指定的输出文件中.

文件包结构

其他引用

之后你可以单独在 package.json 文件中定义 npm build 的 script, 以此来添加 eslint 等等检查, 或者其他 task.

如果需要一些源码或者配置详情, 请留言哟~

2020年4月更新回复:

抱歉各位小伙伴, 这个项目已经过去比较久远了,源码已经掉了,当时也没有放github之类的平台。抱歉哈。

其实原理很简单, 就是利用maven那个插件去调用node的命令,进而把前端编译好并且输出到制定目录。

5人评论了“SpringBoot 集成 React 一体化打包部署”

  1. 对不起大家,由于工作更换原因,源码已经掉了。不过也是一个测试项目,按照步骤配置好pom问题应该不大。
    有问题随时留言哟。

    1. 不好意思啊, 以前的老项目做的,已经没有源码了, 你尝试把pom配好试试呢? 其实原理就是利用maven的插件去调用node的命令

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top