【发布时间】：2021-05-03 10:07:13
【问题描述】：
我正在开发一个项目，它的后端用 Spring Boot 编写，UI 用 React 编写，React UI 代码被合并到带有类似 Spring 代码的 maven 项目中
JavaMavenProject (Project Structure)
->src
->main
->java (Spring boot code)
->reactcode (UI react code)
->resources
->webapp
-> test
当我构建我的 java 代码时，我也在 pom.xml 中使用插件（下面的 sn-p）来构建反应代码
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.7.6</version>
<executions>
<execution>
<id>Install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<nodeVersion>v14.15.0</nodeVersion>
<npmVersion>6.14.8</npmVersion>
</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 build</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
<configuration>
<nodeVersion>v14.15.0</nodeVersion>
<workingDirectory>src/main/reactcode</workingDirectory>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<id>Copy my react app into my Spring Boot target static folder</id>
<phase>process-resources</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>target/classes/static</outputDirectory>
<resources>
<resource>
<directory>src/main/reactcode/build</directory>
<filtering>true</filtering>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
现在，当我通过 Intellij 测试我的整个应用程序时，一切正常，但是当我创建一个 war 文件以在“Apache Tomcat”上运行它时，即使“index.html”没有加载，我尝试调试它，所以我得到了下面（图片）提到的问题
为此我当我从 Apache Tomcat 的 webapp 文件夹中的爆炸战争文件中删除了这些的起始反斜杠时（只是为了调试问题）
<script src="/static/js/2.f62791a5.chunk.js"></script>
<script src="/static/js/main.839bea33.chunk.js"></script>
所以将上面的代码改成
<script src="static/js/2.f62791a5.chunk.js"></script>
<script src="static/js/main.839bea33.chunk.js"></script>
index.html 以及 chunk.js 和 chunk.css 开始出现，如下图所示 enter image description here
现在，aaahh.. 当 o 尝试单击它们不起作用的链接时，我尝试检查网络日志和服务器，但那里也没有运气。
“package.json”的代码
{
"name": "mapping-tool",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-brands-svg-icons": "^5.15.1",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@fortawesome/react-fontawesome": "^0.1.12",
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.1.2",
"@testing-library/user-event": "^12.2.2",
"axios": "^0.21.0",
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-autocomplete-input": "^1.0.15",
"react-bootstrap": "^1.4.0",
"react-bootstrap-table-next": "^4.0.3",
"react-bootstrap-table2-editor": "^1.4.0",
"react-bootstrap-table2-filter": "^1.3.3",
"react-bootstrap-table2-paginator": "^2.1.2",
"react-dom": "^17.0.1",
"react-flexy-table": "^1.3.6",
"react-gif-loader": "^0.6.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"react-select": "^3.1.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
“App.js”的代码
import React from 'react';
import './App.css';
import Mappings from './Mappings';
import Mapping from './Mapping';
import Test from './Test';
import Property from './Property';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
import NavigationBar from './Components/NavigationBar';
import {Row, Col, Container } from 'react-bootstrap';
函数 App() {
return (
<Router>
<NavigationBar />
<Container>
<Row>
<Col lg={12} className={"margin-top"}>
<Switch>
<Route path="/add" exact component={Mapping} />
<Route path="/edit/:id" exact component={Mapping} />
<Route path="/list" exact component={Mappings} />
<Route path="/tester" exact component={Test} />
<Route path="/property" exact component={Property} />
</Switch>
</Col>
</Row>
</Container>
</Router>
);
} 导出默认应用；
“NavigationBar.js”的代码
<Navbar bg="dark" variant="dark">
<Link to={""} className="navbar-brand">
</Link>
<Nav className="mr-auto">
<Link to={"add"} className="nav-link">Add System</Link>
<Link to={"list"} className="nav-link">Mapping List</Link>
<Link to={"tester"} className="nav-link">Add Mapping</Link>
<Link to={"property"} className="nav-link">Property</Link>
</Nav>
</Navbar>
问题总结：我在一个 Maven Java 项目中有 spring boot 和 react 应用程序，我在 Apache Tomcat 上部署了一个生产版本，在 Intellij 上运行良好，但在 Tomcat 上它们没有运行。
“叹息……”
如果有任何帮助，我将不胜感激 谢谢
【问题讨论】：
标签： build war tomcat8 production