logo标签列表

为什么React生产环境构建无法在浏览器上运行？

reactjs
54

我正在尝试使用 React 的构建工具构建我的 React 应用程序。当我尝试“npm start”时，应用程序工作正常。

npm start

在 http://localhost:3000 上可以访问应用程序。

enter image description here

但是当我构建应用程序并尝试访问“build”文件夹中的“index.html”文件时，它无法正常工作，出现一个白色空白屏幕。

npm run build

http://myreact-app/build/index.html => 出现白屏。

这是在运行 npm run build 后创建的构建文件夹。

enter image description here

而这个文件夹中包含了index.html文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="/manifest.json">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>React App</title>
    <link href="/static/css/main.9a0fe4f1.css" rel="stylesheet">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript> 
    <div id="root"></div>
    <script type="text/javascript" src="/static/js/main.46d8cd76.js"></script>
  </body>
</html>

我做错了什么吗？我无法访问我的Apache Web服务器上的构建index.html文件吗？

@Sulthan 我已经添加了。我也在尝试弄清楚它，但这是“npm run build”的输出。控制台没有错误。 - amone
main.js 文件中只包含您的代码还是也包含所有依赖项？这应该很容易检查。 - Sulthan
如果有人需要帮助...我的问题是我的服务器不允许访问由index.html请求的静态文件。 - Lasf
10个回答
46

也许你还没有注意到，但我认为你的html文件无法正确导入css和script文件。当我查看你的文件结构时，我发现所有关于build的东西都在build文件夹下。但在你的html文件中，文件路径前面有斜杠("/")。这就是浏览器在寻找那些文件时会去"build"的上一级目录的原因。尝试删除斜杠。

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
      <meta name="theme-color" content="#000000">
      <link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico">
      <title>React App</title>
      <style></style>
      <link href="static/css/main.65027555.css" rel="stylesheet">
    </head>
    <body
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
      <script type="text/javascript" src="static/js/main.316f1156.js"></script>
    </body>
</html>
4
在任何情况下，浏览器中的网络控制台都应该是首先检查的地方。文件加载错误很可能就在那里。 - Sulthan
21
为什么要添加斜杠？有没有避免它们的正确方法？ - Firdous
45
2
在链接某些参考资料时，您可以发布一些有用的内容，例如帖子的最重要部分，这样您的答案就会更有价值... - DaFois
1
以下是上面评论的源代码。也许它会对其他人有所帮助。https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-the-same-build-from-different-paths - Kodin
3
在此添加更新的链接：https://facebook.github.io/create-react-app/docs/deployment#serving-the-same-build-from-different-paths - Naveen Kumar G C
25

解决此问题的方法是前往您的build文件夹，然后您会看到manifest.json文件，请打开它，您将看到您的manifest.json包含以下内容：

"start_url": ".",

把它改成

"start_url": "/",

有一种替代方式可以解决这个问题：

在你的React项目构建之前，打开你的 package.json 文件，并指定 homepage 属性为 . 值或者你的站点基础URL，例如：

{
   ....
   "homepage": ".",
   ......
}
5
添加"homepage": "."对我很有用。我可以看到在构建的index.html文件中，它将所有链接都以“.”为前缀，这正是我遇到的问题，谢谢！ - James Webb
可以确认。更改start_url没有效果。在package.json中更改主页对我有用。 - Jim LK Yu
7
如果以上方法都不起作用，可能问题出在您正在使用react-router-dom，而路由需要特殊编译来生成存在于您的router配置中的每个页面的独立html文件。
参考： 我使用create-react-app，需要直接在浏览器中打开build/index.html而不使用服务器 简而言之，您需要使用<HashRouter>代替<Router>，并将<Switch>包装器应用于您的路由。例如：
<Switch>
  <Route exact path='/' component={WelcomePage} />
  <Route exact path='/game' component={GamePage} />
</Switch>

请考虑您的路由将会变更为：

http://localhost:3000/#/ -> Root page
http://localhost:3000/#/game -> Other page
HashRouter 在 react-router-dom 中完美运作。 - Saurabh Kiri
我把BrowserRouter改成了HashRouter，然后它就正常工作了！谢谢 - mtkilic
5

您应该尝试使用这里的serve包来运行单页应用程序。

  • npm install -g serve 全局安装
  • serve help 查看帮助文本
  • serve --single build 以服务形式提供单页应用程序，从中可以访问您的React应用程序
我们能否使用生成目录来托管服务器？ - Arvin
0

我使用HashRouter代替BrowserRouter，并且还需要在每个url前面添加/#，像这样：

href={`/#/blogs/${slug}`}

这对我有用，谢谢

0
有时候无法提供内容的原因是因为在构建目录之外执行了“serve -s”命令。正确的方法是进入构建目录，然后从其中执行“serve -s”。
0

我在网站根目录下有一个index.php文件，导致我的应用程序无法运行index.html文件。

0

您需要安装本地服务器插件/扩展。

如果您是vscode用户，则搜索live server扩展并安装它。然后在编辑器底部将出现“Go live”选项。

对于其他编辑器用户（atom/sublime），请搜索live server插件。

0

尝试使用<HashRouter>代替<Router>，并且不要忘记import {HashRouter}。

请问您能说明一下它们之间的区别吗？ - Ahmed Sbai
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接