問題：

你好！我現在花了相當多的時間嘗試讓 Spring Boot 服務器托管一個 React 應用程式。除了最后一個問題和渲染 React 頁面之外，我幾乎可以解決所有問題。

該頁面（稱為“庫”）由服務器打開。我知道服務器的這部分作業正常有兩個原因。

瀏覽器選項卡的名稱應設定為“庫”。
當我將頁面設定為只打開一個帶有簡單 h1 標題的 HTML 頁面時，它也可以正常作業。

Spring Boot Server 未加載 React 網頁

想法：

~~問題似乎來自Thymeleaf，但我找不到問題的原因。~~畢竟問題似乎不是 Thymeleaf，而是配置中的另一個問題。雖然我可能對此不正確。我已經嘗試了多種設定和配置，而我現在擁有的一個似乎總體上運行得最好。

似乎 React 應用程式不是原因。我正在構建 react 專案，在構建程序中沒有出現明顯的問題。所有檔案都在預期的位置生成。當我在瀏覽器中將生成的 Webpack 包作為獨立檔案打開時，它會打開并正常運行。

盡管存在此問題，服務器本身仍按預期運行。

當前沒有使用 REST 功能。到目前為止，該服務器的唯一目標是簡單地打開 React 應用程式。

檔案/配置：

這些都是我認為相關的檔案。如果他們被要求，我會添加更多。

檔案結構

 -- src
    -- \main
       -- \java
       -- \react
       -- \resources
          -- \templates
             -- bundle.js
             -- index.html
             -- bundle.js.License.txt
          -- application.properties
    -- \test
 -- package.json
 -- pom.xml
 -- webpack.config.js

Webpack.Config.js

var path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: './src/main/react/index.js',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, "src/main/resources/templates/"),
        filename: "bundle.js",
        },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            },
            {
                test: /\.css$/,
                exclude: /(node_modules)/,
                use: ["style-loader", "css-loader"],
            }
            
        ]
    },
    plugins: [
    new HtmlWebPackPlugin({
      template: "./src/main/react/index.html",
    }),
  ],
};

包.json

{
  "name": "website",
  "version": "0.1.0",
  "main": "index.js",
  "dependencies": {
    "acorn": "^8.7.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-table": "^7.7.0",
    "react-tabulator": "^0.16.1",
    "rest": "^1.3.1",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "npm start",
    "build": "webpack",
    "watch": "webpack --watch -d --output ./target/classes/static/built/bundle.js"
  },
  "proxy": "http://localhost:8080",
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.13.16",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.7",
    "html-webpack-plugin": "^5.3.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.35.1",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  }
}

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.6</version>
        <relativePath/>  <!-- lookup parent from repository -->
    </parent>
    
    <groupId>jweber.code</groupId>
    <artifactId>Library</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>Library</name>
    <description>Library Website</description>
    
    <properties>
        <java.version>11</java.version>
    </properties>
    
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-rest</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>
        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

應用程式屬性

spring.thymeleaf.cache=false  
spring.thymeleaf.suffix: .html

結束：

在此期間，我會繼續尋找解決方案，并且我一定會用我遇到的任何發現更新帖子。謝謝你的幫助！

跟進：

美國東部時間 4 月 24 日上午 8:22

我在webpack.config.js中添加了一個“模式”欄位，并從反應構建程序中洗掉了一個警告，但僅此而已。我還修改了pom.xml檔案中的依賴項，以查看是否存在由訂單或不需要的問題引起的問題。我確實運行了全新安裝，但這也沒有任何作用。我已經用新資訊更新了上面顯示的檔案。

uj5u.com熱心網友回復：

好的，所以在考慮了這個問題一周之后，（由于強烈的挫敗感，我停了一段時間）我找到了一種我覺得要好得多的方法。

部分解決方案是同時洗掉 Thymeleaf 和 Webpack。另一個是專案的廣泛重組。

我已將較大的專案分成兩個獨立的域。一個用于前端，另一個用于后端。

檔案結構：

 -- Website
     -- \Backend
         -- \src
             -- \main
                 -- \java
                 -- \resources
             -- \test
         -- \target
             -- \classes
                 -- \static
         -- pom.xml
     -- \Frontend
         -- \build
         -- \public
         -- \src
         -- package.json
         -- build.bat
         -- build_script.ps1

一個標準的npm run build命令將創建在 Spring Boot 服務器上托管反應應用程式所需的所有檔案。所需要做的就是將生成的檔案從\Frontend\build檔案夾復制/粘貼到\Backend\target\classes\static檔案夾中。我創建了一個名為build_script.ps1的 Powershell 檔案，它運行 react 應用程式的構建腳本，然后將新構建的檔案復制到后端的預期檔案夾中。build.bat檔案只是運行 Powershell 檔案，我不需要在命令提示符中輸入很多內容。

build_script.ps1：

#Variables
$Directory = "{dir}\LibraryWebsite\Frontend"
$sourceDirectory = "{dir}\LibraryWebsite\Frontend\build\*"
$targetDirectory = "{dir}\LibraryWebsite\Backend\target\classes\static"

#test

#Build the application and then copy it to the server's 
cd $Directory
npm run-script build
Copy-Item -Force -Recurse $sourceDirectory -Destination $targetDirectory

所有這些都導致程式結構更加清晰，并且沒有顯著增加我的作業量。一切都用 ./build 完成。

我可能會在未來的某個時候回到 Thymeleaf（如果我討厭自己），但這暫時滿足了我的需求。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/468857.html

標籤：爪哇反应弹簧靴行家网页包

上一篇：禁用EslintfailOnError導致Webpack停止使用Vue3編譯

下一篇：Webpack和React.lazy沒有拆分動態匯入。為什么？

SpringBootServer未加載React網頁

問題：

想法：