Question

我有一个ReactJS项目，其中Node / Express服务于我的服务器。在我的前端（React）上服务的端口是3312，在我的服务器上是服务端口（5000）。当我通过端口3312加载前端时，一切看起来都很好，并且我的React Router路由工作正常。（我的api的工作一切都很棒）。但是，当我尝试提供静态文件并查看是否通过服务器（端口5000）获得相同的结果时，我只会在页面上看到样式。（我有背景色）我看不到任何应提供静态文件的html吗？

当我查看localhost：5000时，在控制台中没有出现任何错误。但是，我的CSS样式正确显示在页面上（因为在我的身体上设置了背景颜色）。但是，我看不到任何前端React显示html代码。我进入了index.html文件，并在根div中进行了一个简单的测试，它正在显示，但我不明白为什么我的React代码没有显示在服务器上。

我最有可能认为问题出在快速静态文件不能提供我的图像或React Router代码。我还应该注意，我没有使用create-react-app，而是使用webpack开发服务器，没有反应。

此外，我没有使用create-react-app，也没有使用cli来定制Webpack。

这是我的代码：

（节点服务器）

const express = require("express");
const path = require("path");
const router = express.Router();

const app = express();
const port = 5000;

// Serve static files on server
app.use("/public", express.static(__dirname + "/../public"));

app.get("*", function(request, response) {
  response.sendFile(path.join(__dirname + "/../public/index.html"));
});

if (app.get("env") === "development") {
  app.listen(port, () => {
    console.log(`Server started on port ${port}`);
  });
} else {
  app.listen(port, "171.33.4.126", () => {
    console.log(`Server started on port ${port}`);
  });
}

routes.js

import React from "react";

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import HomePage from "./components/homepage";
import AboutPage from "./components/aboutpage";
import Contactpage from "./components/contactpage";

export default (
  <Router>
    <div>
      <Switch>
        <Route exact path="/" component={Landingpage} />
        <Route exact path="/about" component={AboutPage} />
        <Route exact path="/contact" component={Contactpage} />
      </Switch>
    </div>
  </Router>
);

index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Routes from "./routes";

ReactDOM.render(<div>{Routes}</div>, document.getElementById("root"));

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link
      href="/public/assets/css/styles.css"
      rel="stylesheet"
      type="text/css"
    />
    <title>Site</title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

Webpack配置开发

const webpack = require("webpack");
const path = require("path");
// const HtmlWebPackPlugin = require("html-webpack-plugin");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");

module.exports = {
  devServer: {
    historyApiFallback: true,
    port: 3312,
    proxy: {
      "/api": "http://localhost:5000"
    }
  },
  entry: ["babel-polyfill", __dirname + "/src/index.js"],
  output: {
    path: path.join(__dirname, "/public"),
    filename: "bundle.js",
    publicPath: "/"
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          query: {
            presets: ["react", "env", "stage-0"]
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "sass-loader" }
        ]
      }
    ]
  },
  plugins: [
    // new HtmlWebPackPlugin({
    //   template: "./public/index.html"
    // }),
    new BrowserSyncPlugin({
      host: "localhost",
      port: 3312,
      files: [
        "./public/*.html",
        "./public/assets/scss/*.scss",
        "./public/assets/variables/*.scss",
        "./public/assets/mixins/*.scss",
        "./public/assets/reset/*.scss"
      ],
      proxy: "http://localhost:3312/"
    })
  ]
};

以下是我的文件夹结构的屏幕截图：

控制台中网络状态的屏幕截图：

Answer 1

您的反应代码未显示，因为index.html不包含它。 public/bundle.js是您转译的反应代码吗？如果是这样，请将以下行添加到index.html之后的<div id="root"></div>：

<script src="/public/bundle.js"></script>

如果没有，则将src指向的路径更改为正确的路径。

您可以看到CSS样式很好，因为您已经包含了index.html中的样式。

更新：基于您的Webpack配置的几点：

将运行webpack-dev-server的端口更改为3000。您还必须将BrowserSyncPlugin的代理更改为http://localhost:3000/。然后，您可以在浏览器中转到localhost:3312，请求将被代理到在端口3000上运行的webpack-dev-server。
如果我错了，请纠正我，但您尚未完整发布index.html。我猜想您在该<script src="/bundle.js"></script>文件中某处已经已经看起来像.html的行了-根据您的最新评论，看来{ 1}}。 webpack-dev-server通过HtmlWebPackPlugin（您在webpack的bundle.js选项中指定的/）为publicPath提供服务。只要您通过output或localhost:3312访问网站，此方法就可以正常工作。但是，您在端口5000上运行的express.js服务器不知道webpack-dev-server在localhost:3000处服务bundle.js；结果，当您转到/时，最终看不到任何响应代码。至于样式，您已经通过localhost:5000正确地提供了样式，express.js服务器可以理解，因为您已在以下行中指定了样式：/public/assets/css。解决方案是将app.use("/public", express.static(__dirname + "/../public"))文件中的行<script src="/bundle.js"></script>更改为：
```
.html
```
此外，在webpack的输出选项中，将<script src="http://localhost:3312/bundle.js"></script>更改为publicPath。现在，只要您正在运行webpack-dev-server（使用http://localhost:3312/），就可以访问您位于BrowserSyncPlugin的站点和您的localhost:5000文件应为很好。

尝试以下操作：

Webpack配置

bundle.js

index.html

module.exports = {
    devServer: {
        contentBase: path.join(__dirname, "/public"),
        historyApiFallback: true,
        port: 3000,
        proxy: {
            "/api": "http://localhost:5000"
        }
    },
    entry: ["babel-polyfill", __dirname + "/src/index.js"],
    output: {
        path: path.join(__dirname, "/public"),
        filename: "bundle.js",
        publicPath: "http://localhost:3312/"
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    query: {
                        presets: ["react", "env", "stage-0"]
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "sass-loader" }
                ]
            }
        ]
    },
    plugins: [
        new BrowserSyncPlugin({
            host: "localhost",
            port: 3312,
            files: [
                "./public/*.html",
                "./public/assets/scss/*.scss",
                "./public/assets/variables/*.scss",
                "./public/assets/mixins/*.scss",
                "./public/assets/reset/*.scss"
            ],
            proxy: "http://localhost:3000/"
        })
    ]
};

Answer 2

抱歉，看来问题出在index.js中。将{Routes}更改为<Routes />

import React, { Component } from "react";
import ReactDOM from "react-dom";

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Routes from "./routes";

ReactDOM.render(<div><Routes/></div>, document.getElementById("root"));

您在route.js中还有另一个问题。导出类似

的组件

import React from "react";

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import HomePage from "./components/homepage";
import AboutPage from "./components/aboutpage";
import Contactpage from "./components/contactpage";

// make this a component
export default ()=>(
  <Router>
      <Switch>
        <Route exact path="/" component={Landingpage} />
        <Route exact path="/about" component={AboutPage} />
        <Route exact path="/contact" component={Contactpage} />
      </Switch>
  </Router>
);

服务器上的Express静态文件无法正确加载，但是React前端是否正确加载？

2 个答案: