Question

我正在尝试使用react的构建工具构建我的反应应用程序。当我尝试“npm start”时，该应用程序运行正常。

npm start

开http://localhost:3000 =＆gt;我可以访问该应用程序。

但是当我构建应用程序并尝试访问构建文件夹中的“index.html”文件时，它不起作用，我遇到了一个白色的空白屏幕。

npm run build

http://myreact-app/build/index.html =＆gt;白色空白屏幕。

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

这是 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文件吗？

Answer 1

可能你还没注意到，但我不认为你的html文件能够正确导入css和脚本文件。当我查看您的文件结构时，我看到有关构建的所有内容都在构建文件夹下。但是在你的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>
      <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>

Answer 2

https://github.com/facebookincubator/create-react-app/issues/1487

如果添加以下问题，可以克服上述问题 - “主页”： “”，

你的package.json中的

。这不是官方的，而是一个很好的黑客。

Answer 3

您应该尝试使用服务包here来运行单页应用。

serve help全局安装
serve --single build查看帮助文本
{{1}}提供单页应用。我将启动服务器，您可以从中访问您的反应应用程序

Answer 4

要解决此问题，请转到您的build文件夹，然后您将看到manifest.json文件，将其打开，您将看到manifest.json具有以下内容：

"start_url": ".",

将其更改为

"start_url": "/",

还有另一种解决问题的方法：

在您的React项目构建之前，请转到您的package.json文件，并使用homepage值或您的网站基本URL指定.属性，请参见示例：

{
   ....
   "homepage": ".",
   ......
}

Answer 5

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

如果您是vscode用户，则搜索实时服务器扩展并安装它。然后，编辑器底部将显示“上线”选项。

对于其他编辑用户（原子/崇高），请搜索实时服务器插件。

Answer 6

如果以上方法均无效。可能是问题出在，您正在使用react-router-dom，并且路由需要进行特殊的编译，从而为htmls配置中存在的每个页面生成单独的router。

参考： I'm using create-react-app and I need to open build/index.html in browser directly without a server

总而言之，您需要使用<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

Answer 7

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

Answer 8

我在 webroot 中有一个 index.php，它阻止了我的应用运行 index.html。

Answer 9

我能够通过禁用开发工具上的缓存来解决此问题。我检查了网络选项卡，发现状态响应代码为304（来自缓存），禁用缓存后响应状态为200。

为什么不在浏览器上运行React生成版本？

9 个答案: