【发布时间】：2021-04-13 12:54:50
【问题描述】：
项目结构：
- client (react)
- build
- public
- src
- package.json
- ..
- server (nodejs)
- index.js
- package.json
- ..
我有一个 react 应用程序，只是一个简单的应用程序，与 create-react-app 默认值几乎没有任何变化，并且我已经像这样编辑了 package.json 文件：
...
"homepage": "http://localhost:5000",
...
我有一个运行端口 5000 的 nodeJS-server，只是一个简单的。代码：
"use strict";
const express = require('express');
const app = express();
const path = require('path');*
app.use('*', express.static(path.join(__dirname, '../client/build/')));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, '../client/build/index.html'));
});
app.listen(5000, () => console.log('server listening'));
在浏览器中访问 http://localhost:5000 时，我希望应用程序会出现。应用程序的标题出现了，当我检查源代码时，我看到了 index.html 文件的内容，但我得到了这些错误：
我没有更改构建文件夹中的任何内容。我刚刚运行了npm run build，然后使用nodemon index.js 启动了我的服务器。
我猜这与 nodejs 服务器有关，因为当我在客户端文件夹中运行 npm start 并在浏览器中访问 http://localhost:3000 时，我可以看到我的应用程序正在运行。
编辑：
我的 /build/index.html 文件如下所示：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="./logo.png" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" /><link rel="manifest"
href="./manifest.json" />
<title>My app</title>
<link href="./static/css/main.82f10d06.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>
Je
moet JavaScript aan hebben staan in je browser om deze website te kunnen
gebruiken.
</noscript>
<div id="root"></div>
<script src="./static/js/runtime-main.118ea286.js"></script>
<script src="./static/js/2.efca8ee1.chunk.js"></script>
<script src="./static/js/main.fcf604e0.chunk.js"></script>
</body>
</html>
将包含 URL 从 ./static/... 更改为 static/... 或 /static/... 会得到相同的结果。
NPM：服务：
当我使用“npm-serve”时，当我将 URL 更改为 static/... 时它会起作用。像 ./static/... 或 /static/...dont 这样的 URL 不能使用 serve。
编辑 2：package.json：
{
"name": "client",
"version": "0.1.0",
"private": true,
"homepage": "http://localhost:5000/",
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
另一个更新：
所以我用create-react-app 创建了一个新的反应应用程序。我完全做了以下步骤：
$ npx create-react-app testapp
$ cd testapp
$ npm install
$ npm run build
$ cd build
$ serve
我现在看到了 html 内容，但它没有设置样式并且我仍然收到错误（见下文）。
我没有更改 react-app 或 package.json 中的任何内容。
【问题讨论】：
-
你能分享一下 package.json 的内容吗？
-
当然！我已将其添加到我的问题中！
-
我真的不记得了；我过去有类似的问题，尝试删除主页，再次构建和部署。中断的是名称或主页
-
那行不通。不过感谢您的评论。