create-react-app npm 运行构建命令

Posted

技术标签:

【中文标题】create-react-app npm 运行构建命令【英文标题】:create-react-app npm run build command 【发布时间】:2017-02-09 00:07:40 【问题描述】:

我用 create-react-app 构建了一个小型 React 应用程序,它在运行 npm start 后在本地服务器上运行良好。到目前为止还可以。

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


除此之外:我还尝试将其上传到远程服务器,当我访问 URL 时,浏览器返回...

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

...如果有人知道如何解决这个问题,我也将不胜感激。

【问题讨论】:

在加载索引页面的时候,浏览器控制台有没有看到js报错? 使用 webpack。有很多方法可以创建一个 React 应用程序。当我们通过npm run start 运行 webpack 服务器时,Webpack 会发出一个不可见的 bundle 文件。我不明白你为什么要单独构建另一个文件。就我而言,我只是创建了 index.html 文件、index.js 文件和其他 js 文件。使用 webpack 进行集成。 @Charan Cherry:我已经在使用 webpack。 create-react-app 是一个自定义的 webpack 配置。命令行npm run build创建index.html文件,对应的javascript全部打包成一个缩小的js文件,全部放在一个文件夹'build'中。 【参考方案1】:

但是,当我运行 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,请参阅您服务器的文档,了解配置默认提供的文件。

【讨论】:

好的,谢谢。我听说过 Heroku - blog.heroku.com/deploying-react-with-zero-configuration - 我将继续阅读它,但这是在远程服务器上部署实时(非本地)反应应用程序的一种方式吗? 是的。或者,您可以将构建文件夹复制到您有权访问的任何远程服务器,并配置任何静态服务器软件来为其提供服务。 为我工作!简短回答:相信您从npm run build 看到的说明。【参考方案2】:

在这里,您可以通过 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 本地主机/#/关于我们

解决方案2:没有#标签使用browserHistory,

在你的路由器中设置你的历史 = browserHistory,现在使用 sudo npm run build 构建它。

你需要创建“conf”文件来解决404 not found页面, conf文件应该是这样的。

打开你的终端输入以下命令

cd /etc/apache2/sites-available ls 纳米样本.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 重新加载或重启

然后打开您的 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 地址。

希望对其他人有所帮助。

【讨论】:

【参考方案3】:

我尝试运行相同的命令,但反应应用程序也显示白屏。 当我在新浏览器中打开 js 文件“找不到您的文件”时,主 js 文件采用文件的相对路径并显示错误 我使它成为绝对路径并且它工作正常。

【讨论】:

【参考方案4】:

通过create-react-appcreate-react-app构建你的应用程序后

运行命令npm run build 之后运行命令npm install -g serve & 最后serve -s build

更多详细信息可以从这里找到create-react-app-deployment

【讨论】:

【参考方案5】:

你不能通过点击 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 之前。

【讨论】:

【参考方案6】:

'Web Server for Chrome' 扩展非常易于使用。安装它并将目录设置为 ~/my-react-app/build/

【讨论】:

【参考方案7】:
    cd 到您的构建文件夹, python -m SimpleHTTPServer 8080在8080端口启动服务器, 在浏览器中访问地址localhost:8080/index.html

【讨论】:

我也试过了。有用。但路线不变。知道为什么吗? 在本地系统中运行生产构建文件的超级简单方法。谢谢 另一种简单的方法是运行serve -s build【参考方案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(我不知道如果你不这样做会发生什么)

【讨论】:

【参考方案9】:

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

npm run build -> 将创建一个包含 index.html 和 static 文件夹的文件夹构建。只需单击 index.html 将在新浏览器的选项卡上打开。但它只显示空白页。为什么?因为它需要一个服务器才能使其工作。

解决方案:

将文件移至其他文件夹。使用 VC 代码打开文件夹。打开 index.html 并右键单击 -> 选择:使用实时服务器打开。在您的浏览器上打开一个带有相关 IP 地址和端口的新选项卡。

或者您可以使用 xampp 在 localhost 上运行它:

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

【讨论】:

【参考方案10】:

只需在终端中输入这两个命令:

npm run build

npx serve -s build

在此之后只需转到 localhost:5000

【讨论】:

以上是关于create-react-app npm 运行构建命令的主要内容,如果未能解决你的问题,请参考以下文章

如果我运行 create-react-app 它是用 yarn 构建的

切换到 npm 以进行 create-react-app

React中使用create-react-app创建项目,运行npm run eject建立灰度报错

使用 create-react-app 时使用自定义构建输出文件夹

create-react-app 中的“npm run build”是啥?

create-react-app 构建的项目使用代理 proxy