已部署 Firebase react.js 个应用程序 - 空白页面

Question

我是第一次使用 Firebase，我部署了一个 React 应用程序，我知道它正在运行并且托管在 github 页面上。我按照 Firebase 文档提供的说明将应用程序部署到他们的网站。在加载网站时，我看到一个空白页面。

firebase.json 文件：

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

这里之前的帖子都是关于 public 部分被更改为构建的。除此之外，我找不到其他有类似问题的人。

控制台记录和错误，第一行第 1 列中存在意外标记“<”，但我也看不到。

清单文件：

{
  "short_name": "Monster App",
  "name": "Monster App D&D Spells and Items",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "/public/media/800x800.png",
      "type": "image/png",
      "sizes": "800x800"
  }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#2d4059;",
  "theme_color": "#2d4059",
  "orientation": "portrait-primary"
}

建造

Build 

--> Media  -- > *empty*

--> static  -- > css / js --> each contains two files. main.7bf83f0f & the map version & main.3267ab84 and the map version.

asset-manifest.json
favicon.ico
index.html
manifest.json
service-worker.js
worker.js

亲切的问候，

雪

Answer 1

如果您检查浏览器的 JavaScript 控制台，它会显示加载 CSS 时出现问题。

Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css".

Uncaught SyntaxError: Unexpected token '<'

通过查看“网络”选项卡，我们可以看到它正在加载此 URL https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css，但它正在返回 HTML（由于您的重写规则）。

确保您的 CSS 生成到 build/MonsterPWA/static/css/main.7bf83f0f.css，因为这是 Firebase 托管查找它的地方。

编辑：快速检查显示 CSS 实际上存在于 https://monsterpwa.web.app/static/css/main.7bf83f0f.css，因此在 build/static/css/main.7bf83f0f.css.

Answer 2

问题是您已将应用配置为在 /MonsterPWA 目录中查找资产，但该目录似乎不存在。

例如，您的 index.html 文件有

<script type="text/javascript" src="/MonsterPWA/static/js/main.3267ab84.js"></script>

但该文件实际上在 /static/js/main.3267ab84.js。

您的重写规则捕获所有不存在的文件请求并返回 index.html，因此出现关于 <.

的警告

检查 homepage 在 package.json 和/或 PUBLIC_URL 环境变量中的配置。

已部署 Firebase react.js 个应用程序 - 空白页面

Firebase react.js app deployed - blank page

firebase

reactjs

firebase-hosting