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

Question

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

Jor*_*den 5 node.js express reactjs react-router

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

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

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

另外，我没有使用 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}`);
  });
}

Run Code Online (Sandbox Code Playgroud)

路线.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>
);

Run Code Online (Sandbox Code Playgroud)

索引.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"));

Run Code Online (Sandbox Code Playgroud)

索引.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>

Run Code Online (Sandbox Code Playgroud)

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/"
    })
  ]
};

Run Code Online (Sandbox Code Playgroud)

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

控制台网络状态截图：

Answer 1

neb*_*ler 2

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

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

Run Code Online (Sandbox Code Playgroud)

如果不是，则将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文件中的某处 - 根据您的最新评论，它似乎是由HtmlWebPackPlugin. webpack-dev-serverbundle.js通过您在 webpack 选项中指定的/服务提供服务。只要您通过或访问您的网站，这种方法就可以正常工作。然而，运行在端口 5000 上的express.js 服务器并不知道 webpack-dev-server 正在服务；因此，当您转到. 至于样式，您已经通过正确地提供了它们，express.js 服务器可以理解，因为您已经在这一行中指定了：。解决方案是将文件中的行更改为：publicPathoutputlocalhost:3312localhost:3000bundle.js/localhost:5000/public/assets/cssapp.use("/public", express.static(__dirname + "/../public"))<script src="/bundle.js"></script>.html
```
<script src="http://localhost:3312/bundle.js"></script>
```
Run Code Online (Sandbox Code Playgroud)
另外，在 webpack 的输出选项中，将更改publicPath为http://localhost:3312/. 现在，只要您运行了 webpack-dev-server（使用BrowserSyncPlugin），您就可以访问您的站点，localhost:5000并且您的bundle.js文件应该可以正常使用。

请尝试以下操作：

Webpack 配置

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/"
        })
    ]
};

Run Code Online (Sandbox Code Playgroud)

索引.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="/assets/css/styles.css"
            rel="stylesheet"
            type="text/css"
        />
        <title>Site</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="http://localhost:3312/bundle.js"></script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年前
查看次数：	10261 次
最近记录：	6 年，11 月前