javascript - 通过 Express 提供时，Index.html 不呈现组件

Question

本教程即将结束 https://www.freecodecamp.org/news/how-to-deploy-a-react-app-with-an-express-server-on-heroku-32244fe5a250/

并且我已将我的 App.js 更改为以下内容:

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <p>lmfao</p>
      </div>
    );
  }
}

export default App;

现在不幸的是，在运行“npm run dev”后访问 localhost:5000 时，尽管页面标题显示“React App”并且页面源是 index.html ，App 组件没有被渲染，任何地方都没有错误。

这是一张访问 localhost:5000 的图片，它给出了 index.html

有趣的是，如果我在 localhost:3000 上访问 React 服务器，组件会渲染。

我错过了什么？非常感谢

P.S 这是 Server.js

const express = require("express");
const app = express();
const path = require("path");
const port = process.env.PORT || 5000;

// Static file declaration
app.use(express.static(path.join(__dirname, "client/build")));

// production mode
if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "client/build")));
  //  app.get('*', (req, res) => {    res.sendfile(path.join(__dirname = 'client/build/index.html'));  })
}

// build mode
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "/client/public/index.html"));
});

// start server
app.listen(port, (req, res) => {
  console.log(`server listening on port: ${port}`);
});

这里是 package.json 中的依赖项:

"devDependencies": {
    "eslint": "^6.5.1",
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-flowtype": "^4.3.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.16.0",
    "eslint-plugin-react-hooks": "^2.1.2",
    "eslint-plugin-standard": "^4.0.1"
  },
  "dependencies": {
    "concurrently": "^5.0.0",
    "express": "^4.17.1",
    "react-router-dom": "^5.1.2"
  }

编辑:根据要求，这是该项目的 github 链接: https://github.com/Dobermensch/ExpressTest.git您必须为 ExpressTest 文件夹和 client 子文件夹执行 npm install

Answer 1

您获得空白页面的最可能原因是无法下载脚本包。

在浏览器的空白页面上右击并选择“查看页面源代码”或类似的菜单。您将看到 .html 文件的内容，包括 <script>指向 /some-path/some-name.js 的标签文件。无法下载全部或部分文件。要确认是这种情况，只需将浏览器指向 localhost:5000/some-path/some-name.js 即可手动下载 bundle 。 .如果无法下载脚本包，请添加到 Express 的路由。