create-react-app npm run build命令

Question

我有一个带有create-react-app的小型React应用程序,它在运行后从本地服务器运行良好npm start.好到目前为止.

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

---

旁白:我也尝试将其上传到远程服务器,当我转到URL时,浏览器又回来了......

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

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

Answer 1

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

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

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

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

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

我也尝试将其上传到远程服务器,当我转到URL时,浏览器回来了Forbidden:您无权访问/在此服务器上.

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

Answer 2

您无法通过单击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 在运行 npm run-script deploy 之前提供服务。

Answer 3

在这里您可以通过两种可能的方式解决此问题。

1.将路由历史更改为“ hashHistory”，而不是用browserHistory

 <Router history={hashHistory} >
   <Route path="/home" component={Home} />
   <Route path="/aboutus" component={AboutUs} />
 </Router>

现在使用命令构建应用

sudo npm run build

然后将build文件夹放在您的var / www /文件夹中，现在该应用程序可以正常工作，在每个URL中添加＃标签。喜欢

本地主机/＃/ home本地主机/＃/ aboutus

解决方案2：不使用浏览器历史记录＃标签，

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

然后它将要求您使用sudo服务apache2重新加载或重新启动apache服务器

然后打开您的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 4

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