我用create-react-app构建了一个小型 React 应用程序，它在运行后从本地服务器运行良好npm start。到目前为止还可以。
但是，当我运行时npm run build，该过程似乎可以正确执行（创建构建文件夹，其中包含捆绑的 js 文件和 index.html 文件），但是当我在浏览器中打开 index.html 时，它什么也没有呈现。我错过了什么？
另外：我还尝试将其上传到远程服务器，当我访问 URL 时，浏览器返回...
禁止：您无权访问此服务器上的 /。
...如果有人知道如何解决这个问题，我也会很感激。
但是，当我运行 npm run build 时，该过程似乎可以正确执行（创建构建文件夹，其中包含捆绑的 js 文件和 html.index 文件），但是当我在浏览器中打开 index.html 时，它什么也没有呈现。我错过了什么？
当您运行时npm run build，它会打印相关说明：
您不能只打开index.html，因为它应该由静态文件服务器提供服务。
这是因为大多数 React 应用程序都使用客户端路由，而您不能使用file://URL 来做到这一点。
在生产环境中，您可以使用 Nginx、Apache、Node（例如 Express）或任何其他服务器来提供静态资产。只要确保如果您使用客户端路由，您会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，请参阅您的服务器文档以配置默认提供的文件。
您无法通过单击 index.html 来运行生产构建，您必须像下面这样修改您的脚本。
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"deploy": "serve -s build"
}
运行 npm run-script build 后，运行 npm run-script deploy，你会得到类似这样的东西，这是你可以加载生产构建的地方。
npm install -g serve 在运行 npm run-script deploy 之前。
打开 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 （我不知道如果你不这样做会发生什么）
在这里，您可以通过 2 种可能的方式解决此问题。
1.将路由历史改为“hashHistory”而不是browserHistory代替
<Router history={hashHistory} >
<Route path="/home" component={Home} />
<Route path="/aboutus" component={AboutUs} />
</Router>
现在使用命令构建应用程序
sudo npm run build
然后将构建文件夹放在您的 var/www/ 文件夹中，现在应用程序可以正常工作，并在每个 url 中添加 # 标记。喜欢
本地主机/#/home 本地主机/#/aboutus
解决方案2：没有#标签使用browserHistory，
在您的路由器中设置您的历史记录 = {browserHistory}，现在使用 sudo npm run build 构建它。
你需要创建“conf”文件来解决404 not found页面，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>
现在您需要使用以下命令启用 sample.conf 文件
cd /etc/apache2/sites-available
sudo a2ensite sample.conf
然后它会要求您重新加载 apache 服务器，使用 sudo service apache2 reload 或重新启动
然后打开您的 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 create-react-app构建应用程序后
运行命令npm run build在那之后运行命令npm install -g serve& finallyserve -s build
可以从这里找到更多详细信息create-react-app-deployment
'Web Server for Chrome' 扩展非常易于使用。安装它并将目录设置为 ~/my-react-app/build/
cd到您的构建文件夹，python -m SimpleHTTPServer 8080在端口 8080 上启动服务器，localhost:8080/index.html浏览器中的地址。只需在终端中输入这两个命令：
npm run build
npx serve -s build
在此之后只需转到 localhost:5000
https://www.taniarascia.com/getting-started-with-react/和最终脚本可以在 GitHub 上找到。
npm run build -> 将创建一个包含 index.html 和静态文件夹的文件夹构建。只需单击 index.html 将在新浏览器的选项卡上打开。但它只显示空白页。为什么？因为它需要一个服务器才能使其工作。
解决方案 ：
将文件移至其他文件夹。使用 VC 代码打开文件夹。打开 index.html 并右键单击 -> 选择：使用实时服务器打开。在您的浏览器上打开一个带有相关 IP 地址和端口的新选项卡。
或者您可以使用 xampp 在 localhost 上运行它：
打开 XAMPP 服务器。将其放在本地主机上。它必须有效。
我尝试运行相同的命令并且反应应用程序也显示白屏。当我在新浏览器中打开 js 文件“找不到您的文件”时，主 js 文件采用文件的相对路径并显示错误，我将其设置为绝对路径并且工作正常。