我在下面这个教程的末尾,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;现在,不幸的是,在访问localhost:5000之后,运行"npm dev",虽然页面标题是'React‘,页面源是index.html,但是App组件没有呈现,任何地方都没有错误。
这里有一张访问本地主机的图片:5000,它提供了index.html

有趣的是,如果我访问localhost上的React服务器:3000,组件就会呈现。
我遗漏了什么?非常感谢
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文件夹和客户端子文件夹执行npm安装
发布于 2019-10-12 08:25:17
您获得空白页的最可能原因是无法下载脚本包。
在浏览器中,右键单击空白页,并选择“查看页面源”或类似菜单。您将看到.html文件的内容,包括指向/some-path/some-name.js文件的<script>标记。不能下载所有或部分这些文件。要确认这种情况,只需通过将浏览器指向localhost:5000/some-path/some-name.js手动下载包即可。如果无法下载脚本包,则添加到Express的路由。
https://stackoverflow.com/questions/58351709
复制相似问题