create-react-app npm运行构建命令 [英] 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时，它什么也不会呈现。我丢失了什么？

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时，该过程似乎正确执行了（创建包含绑定的js的build文件夹。文件和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运行构建命令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！