create-react-app npm run build 命令 [英] create-react-app npm run build command

问题描述

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

I have a built a small React application with create-react-app, and it runs fine from the local server after running npm start. OK so far.

但是，当我运行 npm run build 时，该进程似乎正确执行(创建构建文件夹，其中包含捆绑的 js 文件和 index.html 文件)，但是当我打开 index.html 文件时.html 在我的浏览器中它什么都不呈现.我错过了什么?

However, when I run npm run build, the process appears to execute correctly (creates build folder, which contains the bundled js file and the index.html file), but when I open index.html in my browser it renders nothing. What am I missing?

旁白:我还尝试将其上传到远程服务器，当我访问该 URL 时，浏览器返回...

Aside: I also tried uploading it to a remote server and when I went to the URL the browser came back with...

禁止:您无权访问/在此服务器上.

Forbidden: You don't have permission to access / on this server.

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

...if anyone has any idea how to resolve this I'd also appreciate it.

推荐答案

但是，当我运行 npm run build 时，该进程似乎可以正确执行(创建 build 文件夹，其中包含捆绑的 js 文件和 html.index 文件)，但是当我在浏览器中打开 index.html 时，它什么也不渲染.我错过了什么?

However, when I run npm run build, the process appears to execute correctly (creates build folder, which contains the bundled js file and the html.index file), but when I open index.html in my browser it renders nothing. What am I missing?

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

When you run npm run build, it prints the relevant instructions:

您不能只打开 index.html，因为它应该由静态文件服务器提供.
这是因为大多数 React 应用程序使用客户端路由，而您不能使用 file:// URL 来做到这一点.

You can’t just open index.html because it is supposed to be served with a static file server.
This is because most React apps use client-side routing, and you can’t do that with file:// URLs.

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

In production, you can use Nginx, Apache, Node (e.g. Express), or any other server to serve static assets. Just make sure that if you use client-side routing, you serve index.html for any unknown request, like /*, and not just for /.

在开发中，您可以使用 pushstate-server 来实现这一点.它适用于客户端路由.这正是印刷说明建议您执行的操作.

In development, you can use pushstate-server for this. It works with client-side routing well. This is exactly what the printed instructions suggest you to do.

我也尝试将其上传到远程服务器，当我转到 URL 时，浏览器返回禁止:您无权访问/在此服务器上.

I also tried uploading it to a remote server and when I went to the URL the browser came back with Forbidden: You don't have permission to access / on this server.

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

You need to upload the contents of the build folder, not the build folder itself. Otherwise the server can’t find your index.html because it is inside build/index.html, and so it fails. If your server doesn’t detect a top-level index.html, please refer to your server’s documentation on configuring files served by default.

这篇关于create-react-app npm run build 命令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！