Question

我的 react 应用程序在 localhost 上运行良好，服务器端（节点 js）在 localhost 上也运行良好，但是当我将它部署到 Heroku 上时，它显示一个空白页面。

对于部署，我确实创建了一个 Procfile，我在其中引用了服务器文件

web: node ./server/index.js

其中还包括：

app.use(express.static(__dirname + '../client/build'));
app.get("/*", (req, res) =>
    res.sendFile(path.resolve(__dirname, "../client/build", "index.html"))
);

当我运行应用程序时，我得到一个空白页面

我得到的控制台：

Uncaught SyntaxError: Unexpected token '<'
main.679eafbe.chunk.js:1 
Uncaught SyntaxError: Unexpected token '<'
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

搜索后我确定：

react 应用已创建：npm create-react-app my-app
我的 package.json 中没有用于 React 应用程序的主页道具
我确实构建了 react 应用程序，创建后在 myApp 下的 client 文件夹下找到该应用程序

Answer 1

Uncaught SyntaxError: Unexpected token '<'
main.679eafbe.chunk.js:1

此错误意味着您的服务器在处理 main.679eafbe.chunk.js 时正在返回 HTML。

这意味着 express.static 可能与该路径不匹配，并且请求被传递到您的 html 中间件。

这要么是因为 main.679eafbe.chunk.js 不存在于 client/build 目录中，要么是 express.static 配置错误。

如果让我猜一猜，我建议更改您传递给 root 的 express.static 以与您在 html 中间件中使用的路径保持一致，例如

app.use(express.static(path.resolve(__dirname, "../client/build"))); // path.resolve was missing here
app.get("/*", (req, res) =>
    res.sendFile(path.resolve(__dirname, "../client/build", "index.html"))
);

部署后的空白页面 - 使用节点反应应用程序

1 个答案: