create-react-app npm 运行构建命令

Question

我用 create-react-app 构建了一个小型 React 应用程序，它在运行 npm start 后从本地服务器运行良好。到目前为止还可以。

但是，当我运行 npm run build 时，该过程似乎可以正确执行（创建包含捆绑的 js 文件和 index.html 文件的构建文件夹），但是当我在浏览器中打开 index.html 时，它会呈现没有什么。我错过了什么？

---

另外： 我还尝试将其上传到远程服务器，当我访问 URL 时，浏览器返回…

禁止：您无权访问此服务器上的 /。

…如果有人知道如何解决这个问题，我也会很感激。

原文由 Paulos3000 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

但是，当我运行 npm run build 时，该过程似乎可以正确执行（创建 build 文件夹，其中包含捆绑的 js 文件和 html.index 文件），但是当我在浏览器中打开 index.html 时，它什么也没有呈现。我错过了什么？

当您运行 npm run build 时，它会打印相关说明：

您不能只打开 index.html 因为它应该 由静态文件服务器提供。

这是因为大多数 React 应用程序使用客户端路由，而您不能使用 file:// URL 来做到这一点。

在生产 中，您可以使用 Nginx、Apache、Node（例如 Express）或任何其他服务器来提供静态资产。只要确保如果您使用客户端路由，您服务 index.html 对于任何未知请求，例如 /* ，而不仅仅是 /

在开发 中，您可以为此使用 pushstate-server 。它适用于客户端路由。这正是印刷说明建议您执行的操作。

我还尝试将它上传到远程服务器，当我转到 URL 时，浏览器返回禁止访问：您无权访问/在此服务器上。

您需要上传 build 文件夹的内容，而不是 build 文件夹本身。否则服务器找不到你的 index.html 因为它在 build/index.html 里面，所以它失败了。如果您的服务器未检测到顶级 index.html ，请参阅您服务器的文档以了解默认提供的配置文件。

原文由 Dan Abramov 发布，翻译遵循 CC BY-SA 3.0 许可协议