除了我在这里提交的答案：Hosting a single page application with spring boot
以下是您需要的目录结构。您显然会在 java 目录中拥有您的 REST API（请务必在我上面提供的其他答案中记下控制器细节）：
- sample-project-root
- src
- main
-java
- js
app.js
index.js
- resources
- templates
index.html
webpack.config.js
package.json
pom.xml
下面是您的“MainController”将使用 Thymeleaf 呈现的 index.html 页面。这需要放在 src/main/resources/templates/ 目录中（标准 Spring 行为）。
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8"/>
<title>Sample Project</title>
</head>
<body>
<!-- Entry point to our ReactJS single page web application -->
<div id="root"></div>
<script type="text/javascript" src="built/bundle.js"></script>
</body>
</html>
下面是实际启动 React 应用程序的 index.js 页面。请注意，主渲染函数正在获取 index.html 页面中的文档 id 'root'。
index.js
const React = require('react');
const ReactDOM = require('react-dom');
import App from './app.js';
import 'bootstrap/dist/css/bootstrap.min.css';
// Render main app
ReactDOM.render(
<App />,
document.getElementById('root')
);
您将需要利用 Webpack 来管理您的 ReactJS 依赖项。我将与您分享一个位于项目根目录的示例 webpack.config.js 文件。
webpack.config.js
var path = require('path');
module.exports = {
entry: ['babel-polyfill', './src/main/js/index.js'],
devtool: 'sourcemaps',
cache: true,
mode: 'development',
output: {
path: __dirname,
filename: './src/main/resources/static/built/bundle.js'
},
module: {
rules: [
{
test: path.join(__dirname, '.'),
exclude: /(node_modules)/,
use: [{
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}]
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif|eot|otf|ttf|woff|woff2)$/,
use: [
{
loader: 'url-loader',
options: {}
}
]
}
]
}
};
不要太在意下面的两条规则，你要关注的是我们的 index.js 页面的入口点和运行你的 package.json 文件的结果的输出路径。
package.json（也将它放在项目的根级别）
{
"name": "spring-data-rest-and-reactjs",
"version": "0.1.0",
"description": "Demo of ReactJS + Spring Data REST",
"repository": {
"type": "git",
"url": "git@github.com:spring-guides/tut-react-and-spring-data-rest.git"
},
"keywords": [
"rest",
"hateoas",
"spring",
"data",
"react"
],
"author": "Sample Team",
"license": "Apache-2.0",
"bugs": {
"url": ""
},
"homepage": "url",
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2",
"rest": "^1.3.1",
"bootstrap": "^4.2.1",
"jquery": "^3.3.1",
"popper.js": "^1.14.6",
"style-loader": "^0.23.1",
"css-loader": "^2.1.0",
"url-loader": "^1.1.2",
"postcss-loader": "^3.0.0",
"precss": "^4.0.0",
"autoprefixer": "^9.4.3",
"sass-loader": "^7.1.0",
"react-octicon": "^3.0.1"
},
"scripts": {
"watch": "webpack --watch -d"
},
"devDependencies": {
"@babel/core": "^7.1.0",
"babel-polyfill": "^6.0.16",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.0"
}
}
您的 React 应用程序可能需要不同的依赖项，但这只是一个示例。
最后，将以下内容添加到您的 Maven 插件 (pom.xml)：
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.6</version>
<configuration>
<installDirectory>target</installDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v10.11.0</nodeVersion>
<npmVersion>6.4.1</npmVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>webpack build</id>
<goals>
<goal>webpack</goal>
</goals>
</execution>
</executions>
</plugin>
资源：
祝你好运！