我正在使用create-react-app开发一个应用程序，一切都很顺利，除了我想最初从后端提供index.html，并且遇到了麻烦。
我想这样做的原因是我可以将一些特定于用户的 Javascript 注入index.html页面，并在用户最初点击页面时运行各种其他查询(类似于此人(
因此，我不会连接到localhost:3000以查看应用程序，而是连接到localhost:8080并让服务器提供此index.html文件。(所有其他资产(JS，CSS，图像(仍将在localhost:3000上(
这样做的一个问题似乎是脚本标签默认不包含在index.html文件中，而是由 create-react-app 生成的。也就是说，假设这是我index.html文件：
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
</head>
<body>
<div id="root"></div>
</body>
</html>
如果我运行npm start，然后检查源代码，它将是这样的(由于我认为是CRA运行时注入(：
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<div id="root"></div>
</body>
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script>
</html>
结果，在服务器上，我目前正在尝试这样的事情：
#[get("/")]
fn handle_index() {
let scripts = r#"<script src="https://localhost:3000/static/js/bundle.js"></script>
<script src="https://localhost:3000/static/js/0.chunk.js"></script>
<script src="https://localhost:3000/static/js/main.chunk.js"></script>"#;
let index_html = include_str!("../frontend/public/index.html");
let document = format!(r#"<script type="application/javascript">
window.APP_GLOBALS = { user_id: 5, color: "red" };
</script> {}{}"#, data, index_html, scripts);
return document;
}
因为我不确定是否有任何其他方法可以注入这些脚本标签。看起来创建-反应-应用程序只为我的localhost:3000页面做，而不是localhost:8080页面。
这似乎有些奏效。也就是说，页面加载，但有两个问题。
现在，许多资产网址都是错误的。相反，它们指向
localhost:8080而不是localhost:3000，并且%PUBLIC_URL%URL同样不起作用(我想这是另一个不再发生的过程(Websocket 自动重新加载开发服务器不再工作。当我导航到
localhost:3000时它有效，但不能localhost:8080.当我编辑文件并保存时，页面只会变成白色，控制台中没有错误。
我认为所有这些问题都是由于相同的原因：create-react-app通常以某种方式预处理index.html文件(转换%PUBLIC_URL%，添加那些脚本标签，处理重新加载(，但是当文件从服务器返回时，它不再这样做。
我想知道的是如何恢复此功能。基本上，让这些脚本标签和%PUBLIC_URL%进程发生，而无需我的后端服务器尝试这样做。
当你运行npm start时，你告诉CRA使用webpack进行开发构建。Webpack 会执行您看到的所有处理，例如注入脚本和替换%PUBLIC_URL%。您不希望后端提供public文件夹中的index.html，因为该文件尚未由 webpack 处理。相反，您需要后端来提供 webpack 的构建输出。
npm start配置是开发版本，它有利于开发，但不利于生产。(此外，它不会将其输出保存到文件系统，因此如果您愿意，您甚至无法从后端提供它。请参阅 CRA 问题 #1070(。如果您运行npm run build，您会在build文件夹中获得一个生产构建，您应该从后端提供该构建(然后您可以进行所需的任何注入(。
这样做的缺点是构建需要更长的时间，当您更改前端文件时它不会自动重建，而且我不确定它给出的错误是否与npm start一样有用。因此，您可能希望在开发前端时使用npm start，在测试后端时使用npm run build。还有一些项目，如补丁包，可以让你使npm start的构建输出保留在文件系统中，以便你可以为它服务，但我还没有尝试过任何一个。
顺便说一句 - 小心从后端将脚本注入 html。考虑在后端设置 cookie 并在前端读取这些 cookie。这更安全，更容易调试等。