Question

我想在浏览器中浏览我的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文件中调用我的/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>

react生产构建文件放置在> 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，然后浏览器显示空白页我在控制台窗口中收到以下错误消息： GET 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>

我如何设法在浏览器中显示React组件？

Answer 1

我找到了解决方案我必须将build / static / js /从src / main / static / build / static / js /移到> / src / main / resources / static / build / static / 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>

如何使用Spring Boot Web服务器在浏览器中显示我的React生产版本？

1 个答案: