如何通过使用Spring服务器在浏览器中显示我的反应产品生成？
我想在浏览器中浏览我的React页面。作为一个web服务器，我使用Spring。web服务器控制器如下所示：
package com.steinko.reactspringboottutorial.webserver;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
@Controller
public class HomeController {
private final Logger log = LoggerFactory.getLogger(HomeController.class);
@RequestMapping("/" )
String index(HttpServletRequest request) {
log.info("Request Mapping");
log.info(request.toString());
return "index";
}
}我的文件是从index.html fiel调用的/src/main/resources/templates/index.html文件包含的
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8"/>
<title>Todo fronend</title>
<script type="text/javascript" th:src="@{../../static/build/static/js/main.3a7ae2a8.chunk.js}"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>文件放置在>src/main/static/build/static/js/main.3a7ae2a8.chunk.js中，使用Gradel构建此程序。build.gradle文件如下所示：
buildscript {
repositories {
mavenCentral()
}
dependencies {
classpath("org.springframework.boot:spring-boot-gradle-plugin:2.1.4.RELEASE")
}
}
plugins {
id 'java'
id 'org.springframework.boot' version '2.1.5.RELEASE'
id "com.moowork.node" version "1.3.1"
}
apply plugin: 'io.spring.dependency-management'
group = 'com.steinko.reactspringboottutorial.webserver'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'
configurations {
developmentOnly
runtimeClasspath {
extendsFrom developmentOnly
}
}
repositories {
mavenCentral()
}
test {
useJUnitPlatform()
}
sourceSets {
main {
resources {
srcDirs = [
'src/main/resources',
'src/main/static'
]
}
}
}
ext {
set('springCloudVersion', "Greenwich.SR1")
}
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.cloud:spring-cloud-gcp-starter'
implementation 'org.springframework.cloud:spring-cloud-starter-sleuth'
developmentOnly 'org.springframework.boot:spring-boot-devtools'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
testImplementation 'org.junit.jupiter:junit-jupiter-api:5.3.1'
testImplementation 'org.junit.jupiter:junit-jupiter-params:5.2.0'
testRuntimeOnly 'org.junit.jupiter:junit-jupiter-engine:5.3.1'
}
dependencyManagement {
imports {
mavenBom "org.springframework.cloud:spring-cloud-dependencies:${springCloudVersion}"
}
}
node {
/* gradle-node-plugin configuration
https://github.com/srs/gradle-node-plugin/blob/master/docs/node.md
Task name pattern:
./gradlew npm_<command> Executes an NPM command.
*/
// Version of node to use.
version = '10.16.0'
// Version of npm to use.
npmVersion = '6.9.0'
// If true, it will download node using above parameters.
// If false, it will try to use globally installed node.
download = false
}使用$gradle bootRun命令启动程序并在浏览器中输入localhost:8080之后，浏览器将显示一个空白页，然后在控制台窗口中得到以下错误消息:获取浏览器中的http://localhost:8080/static/build/static/js/main.3a7ae2a8.chunk.js net::ERR_ABORTED 404，index.html如下所示：
<!DOCTYPE html> <html> <head lang="en">
<meta charset="UTF-8"/>
<title>Todo fronend</title>
<script type="text/javascript" src="../../static/build/static/js/main.3a7ae2a8.chunk.js"></script> </head> <body>
<div id="root"></div>
</body> </html>如何在浏览器中显示反应性组件？
回答 1
Stack Overflow用户
发布于 2019-06-13 11:22:28
我已经找到了一个解决方案--我必须将构建/静态/js/从src/main/静态/ build /静态/js/移到>/src/main/resources/static/build/静力/js，然后我必须将src/main/javascript/public/index.html合并为>src/main/resources/templates/index.html，并且我必须编辑将构建文件加载到
<script th:src="@{build/static/js/2.f61826be.chunk.js}" type = "text/JavaScript"></script>
<script th:src="@{build/static/js/main.3a7ae2a8.chunk.js}" type = "text/JavaScript"></script>https://stackoverflow.com/questions/56563880
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号