我的应用程序在使用代理的开发环境中运行良好。当我推送到heroku(生产)后，我看到一个空白屏幕。在 Chrome 开发者工具中，我看到以下两个错误:
Unexpected token. manifest.json:1
Uncaught SyntaxError: Unexpected token < main.bac17543.js:1
当我点击这两个错误时，我看到 list 文件、main.css 文件和 main.css 文件都以 HTML 文件作为源。无法从 client/build/index.html 加载其他文件。
好的，所以尝试一下，我发现当我运行“npm run dev”时，它在客户端端口上运行得很好。但是，当应用程序在服务器端口上启动并使用类(class)中显示的以下快速代码提供 index.html 文件时，会出现错误:
if (process.env.NODE_ENV === 'production') {
//Express will serve up production assets like main.js file
app.use(express.static('/client/build'));
//Express will serve up html file if it doesn't recognize the route
const path = require('path');
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
});
}
此代码成功提供了 html 文件。但其中链接的所有其他文件都会失败。
多次重新加载到 Heroku 后，我通过取出生产 if 语句并导航到 localhost:5000 (服务器端口)重现了该错误。从客户端文件夹运行“npm run build”后，运行“npm run dev”时收到相同的错误。即使我在“npm run build”之前将“build”切换为“public”以运行index.html，我也会收到相同的错误。为了测试html文件是否被调用，我写了<h3>testing html</h3> ，并且 HTML 作为唯一内容成功呈现到屏幕上。但似乎没有找到manifest、favicon、css文件和javascript文件，返回原始index.html文件并在文件开头抛出错误:“<.”
这是我的 build 文件夹下的 index.html 文件:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="./manifest.json"><link rel="shortcut icon" href="./favicon.ico"><title>Compass</title><link href="./static/css/main.c092d6b6.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/main.bac17543.js"></script></body></html>
它位于公共(public)文件夹中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<h3>this HTML is called, but the javascript file fails when served from Express</h3>
<div id="root"></div>
</body>
</html>
我已经在两个文件夹的 href 和 src 属性中尝试了绝对路径和相对路径。但仍然没有骰子。我非常有信心这些路径是正确的，因为它们可以正常工作，但由于某种原因它无法正确读取。构建路径为 server/build/index.html、sever/build/static/css/main.d3f5fbbb.css 和 server/build/static/js/main.69f468ec.js。
也许存在一些配置问题？我还没有接触过 webpack 或其他任何东西的配置。我只是不确定为什么在从 Express 提供服务时，责任会落在 HTML 文件上。可以请您指教吗？
最佳答案
我也遇到了同样的问题。我能够通过在我的react package.json中设置我的主页来解决这个问题，该主页从自动填充到heroku url的github页面中设置，因为这是提供静态文件的。
发现此信息很有帮助，并引导我检查 package.json 中的主页属性
https://github.com/facebook/create-react-app/issues/527
希望这对尝试从一个存储库部署 Express 和 React 到 Heroku 的其他人有所帮助。
关于reactjs - 生产中的 Express-React 应用程序出现空白屏幕 : Uncaught SyntaxError: Unexpected token < | index. html 不提供其他文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51071848/