时间戳

首页 > 解决方案 > 创建部署在firebase中的反应应用程序显示空白屏幕

reactjs - 创建部署在firebase中的反应应用程序显示空白屏幕

问题描述

我遵循的步骤：

  1. npm i firebase-tools -g
  2. 火力基地登录
  3. npm 运行构建
  4. 火力基地初始化

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys What do you want to use as your public directory? (public) build Configure as a single-page app (rewrite all urls to /index.html)?(y/N) y Set up automatic builds and deploys with GitHub? (y/N) N File build/index.html already exists. Overwrite? (y/N) N

5.firebase deploy 注意：我可以选择从现有项目中进行选择，我做到了。firebase.json：

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

我的 index.html：

  <!DOCTYPE html>
  <html lang="en">

  <head>
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description"
      content="some cool meta tags" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />

    <title>
      Some cool title
    </title>
  </head>

  <body>
    <div id="root"></div>
  </body>

  </html>

部署后，我等了 15-20 分钟才显示欢迎消息，我看到的只是一个空白屏幕。我有一个build,public文件夹。它们都包含与上面提到的相同的 index.html。此外，firebase.json它是公共文件夹和构建文件夹的兄弟。我在本地运行我的应用程序，它按预期运行。

标签： reactjsfirebasecreate-react-app

解决方案

推荐阅读