Question

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

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

旁白：我还尝试将其上传到远程服务器，当我转到该网址时，浏览器又回来了......

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

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

Answer 1

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

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

您不能只打开index.html，因为它应该使用静态文件服务器提供。
这是因为大多数React应用都使用客户端路由，而您无法使用file://网址执行此操作。

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

在开发中，您可以使用pushstate-server。它适用于客户端路由。这正是印刷说明书建议你做的事情。

我也尝试将其上传到远程服务器，当我转到URL时，浏览器返回了Forbidden：您无权访问/在此服务器上。

您需要上传build文件夹的内容，而不是build文件夹本身。否则，服务器找不到您的index.html，因为它位于build/index.html内，因此失败。如果您的服务器未检测到顶级index.html，请参阅服务器上有关配置默认服务文件的文档。

Answer 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中添加#tag。喜欢

本地主机/＃/家本地主机/＃/公司简介

解决方案2：没有#tag使用browserHistory，

在路由器中设置历史记录= {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>

现在需要使用以下命令启用sample.conf文件

cd /etc/apache2/sites-available
sudo a2ensite sample.conf

然后它会要求你重新加载apache服务器，使用 sudo service apache2 reload or 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地址。

我希望它对其他人有所帮助。

Answer 3

cd到您的构建文件夹，
python -m SimpleHTTPServer 8080在端口8080上启动服务器，
转到浏览器中的地址localhost:8080/index.html。

Answer 4

我试图运行相同的命令，反应应用程序也显示白屏。当我在新浏览器中打开js文件时，主js文件正在获取文件的相对路径并显示错误＆＃34;找不到您的文件＆＃34; 我把它变成了绝对的路径，它的工作正常。

Answer 5

您无法通过单击index.html来运行生产版本，而必须像下面这样修改脚本。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "serve -s build"
  }

在运行npm run-script构建之后，运行npm run-script deploy，您将获得类似的信息，在这里您可以加载生产构建。

npm install -g在运行npm run-script部署之前提供。

Answer 6

“用于Chrome浏览器的Web服务器”扩展程序超级易于使用。安装它并将目录设置为〜/ my-react-app / build /

Answer 7

通过create-react-app create-react-app构建应用程序之后

运行命令npm run build之后的运行命令npm install -g serve最终是serve -s build

更多详细信息，请点击此处create-react-app-deployment

Answer 8

打开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（我不知道如果不这样做会发生什么情况）

Answer 9

https://www.taniarascia.com/getting-started-with-react/和最终脚本可以在GitHub上找到。

npm run build->将创建一个包含index.html和静态文件夹的文件夹。只需单击index.html，将在新浏览器的标签上打开。但是它仅显示空白页。为什么？因为它需要服务器才能使其正常工作。

解决方案：

将文件移动到其他文件夹。使用VC代码打开文件夹。打开index.html，然后右键单击->选择：使用实时服务器打开。在浏览器上打开的新标签页带有相关的IP地址和端口。

或者您可以使用xampp在本地主机上运行它：

打开XAMPP服务器。将其放在本地主机上。而且必须有效。

create-react-app npm run build命令

9 个答案: