我使用 create-react-app 构建了一个小型的 React 应用，当我运行npm start后，从本地服务器上可以正常运行。
然而，当我运行npm run build时，进程似乎执行正确（创建了包含捆绑的 js 文件和 index.html 文件的构建文件夹），但是当我在浏览器中打开 index.html 时，它没有呈现任何内容。 我缺少什么？
另外: 我也尝试将其上传到远程服务器，当我访问 URL 时，浏览器返回...
禁止访问：您没有权限访问此服务器上的/。
如果有人知道如何解决这个问题，我也会非常感谢。
index.html，因为它应该由静态文件服务器提供服务。这是因为大多数React应用使用客户端路由，而file:// URL无法做到这一点。/*）提供index.html，而不仅仅是/。pushstate-server。它很好地与客户端路由配合使用。这正是印刷的说明建议您执行的操作。
你需要上传我也尝试将其上传到远程服务器，当我访问URL时，浏览器返回Forbidden: You don't have permission to access / on this server.
build文件夹中的内容，而不是build文件夹本身。否则服务器找不到你的index.html，因为它在build/index.html中，因此会失败。如果你的服务器没有检测到顶层的index.html，请参考你的服务器文档来配置默认提供的文件。npm run build 看到的指令。 - HoldOffHunger您不能通过单击index.html来运行生产构建，您需要修改脚本如下。
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"deploy": "serve -s build"
}
打开index.html文件。 滚动到末尾，您会看到
<script src="/static/js/2.b5125f99.chunk.js"></script><script src="/static/js/main.fcdfb32d.chunk.js"></script></body></html>
只需在两个src属性前面加上一个点:
<script src="./static/js/2.b5125f99.chunk.js"></script><script src="./static/js/main.fcdfb32d.chunk.js"></script></body></html>
如果您有任何样式，您也必须滚动到开头附近，您会看到:
<link href="/static/css/main.1eabf3ab.chunk.css" rel="stylesheet">
并在 href 属性前面加上一个点号
<link href="./static/css/main.1eabf3ab.chunk.css" rel="stylesheet">
注意: 文件名可能不同于您的文件名
当使用服务器或者再次运行npm run build时，请确保将其改回去(如果不这样做，我不知道会发生什么)
您可以通过两种可能的方式解决此问题。
1.在以下位置将路由历史更改为“hashHistory”，而不是“browserHistory”
<Router history={hashHistory} >
<Route path="/home" component={Home} />
<Route path="/aboutus" component={AboutUs} />
</Router>
sudo npm run build
将构建文件夹放置在var/www/文件夹中，现在应用程序可以正常工作，并且每个URL都添加了#标签，例如
localhost/#/home localhost/#/aboutus
解决方案2：使用browserHistory而不是#标签
在您的路由器中设置history = {browserHistory}，现在使用sudo npm run build进行构建。
您需要创建“conf”文件来解决404未找到页面问题，conf文件应该像这样。
打开终端并输入以下命令
cd /etc/apache2/sites-available ls nano sample.conf 将以下内容添加到其中。
<VirtualHost *:80>
ServerAdmin admin@0.0.0.0
ServerName 0.0.0.0
ServerAlias 0.0.0.0
DocumentRoot /var/www/html/
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
<Directory "/var/www/html/">
Options Indexes FollowSymLinks
AllowOverride all
Require all granted
</Directory>
</VirtualHost>
cd /etc/apache2/sites-available
sudo a2ensite sample.conf
然后它会要求您重新加载Apache服务器，使用sudo service apache2 reload或restart。
接下来打开您的localhost/build文件夹，并添加以下内容的.htaccess文件。
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]
现在应用程序正常工作。
注意：将0.0.0.0 IP更改为您的本地IP地址。
我希望对他人有所帮助。
create-react-app创建React应用程序之后，运行命令npm run build。然后运行命令npm install -g serve，最后运行serve -s build。更详细的信息可以从这里了解create-react-app部署。请注意，保留HTML标记。只需在终端中输入这两个命令：
npm run build
npx serve -s build
接下来只需要打开 localhost:5000 即可。
Web Server for Chrome'扩展非常易于使用。安装它并将目录设置为~/my-react-app/build/。
'python -m SimpleHTTPServer 8080 在8080端口启动一个服务器,localhost:8080/index.html.serve -s build。 - Sunny Tambihttps://www.taniarascia.com/getting-started-with-react/ 最终的脚本可以在 GitHub 上找到。
npm run build -> 将创建一个包含 index.html 和 static 文件夹的 build 文件夹。仅通过点击 index.html，它将在新的浏览器选项卡中打开。但是它只显示空白页面。为什么？因为需要一个服务器来使其工作。
解决方法：
将文件移动到其他文件夹中。使用 VC Code 打开该文件夹。右键单击 index.html -> 选择：使用 live server 打开。在您的浏览器上打开了一个带有相关 IP 地址和端口的新选项卡。
或者您可以在 localhost 上使用 xampp 运行它：
打开 XAMPP 服务器。将其放置在 localhost 上。它必须正常工作。
npm run start运行Webpack服务器时，该文件是不可见的。我不明白为什么你要单独构建另一个文件。在我的情况下，我只创建了index.html文件、index.js文件和其他js文件，并使用Webpack进行集成。 - Mr_Perfectnpm run build将创建index.html文件，并且相应的JavaScript会全部打包到一个压缩后的js文件中，然后放在一个名为“build”的单独文件夹中。 - Paulos3000