Firebase react.js 应用部署 - 空白页面

Posted 2023-03-05

【中文标题】Firebase react.js 应用部署 - 空白页面

【英文标题】：Firebase react.js app deployed - blank page

【发布时间】：2020-07-19 02:35:56

【问题描述】：

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

链接：https://monsterpwa.web.app/

firebase.json 文件：

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

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

控制台记录和错误，在第一行第 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

亲切的问候，

雪

【问题讨论】：

哪个文件给您带来了意外的令牌错误？您是否尝试过将其设置为公开而不是构建？

点击控制台中的链接。您的 main.js 文件实际上正在加载 index.html 内容

您能展示一下您的build 目录的内容是什么样的吗？

抱歉，jamargolisvt，我没想到会这么快得到回复，*** 上有答案，我应该将其设置为公开，我将尝试将其设置为公开并发布我的情况。 @Phil 我发现也是如此，但我不知道为什么..当然我会在编辑中添加它。

我把上面的构建放在一个编辑中，因为它在回复部分不可读

【参考方案1】：

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

例如，您的index.html 文件有

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

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

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

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

【讨论】：

是的，你 100% 正确，而且我的目录中也没有这样的文件夹，这只存在于构建中。这个应用程序的“主页”设置为我的github页面，我觉得这是错误的。谢谢！首先使用 firebase 的原因是因为该应用程序在 github 页面上也没有按预期工作，并且有人告诉我 github 页面是静态的，不能做我想做的事情。

进行更改以包含 MonsterPWA 文件夹后，我仍然得到一个空白网页和相同的“找不到 css”错误。 \build\MonsterPWA\static\css\main.7bf83f0f.css C:\Users\locks\Desktop\EditMonster\build\MonsterPWA\static\js\main.3267ab84.js 错误：monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css"。

除了您的manifest.json 文件外，我觉得一切正常。我对你的构建系统（或者一般的 React，我更喜欢 Vue 的粉丝）了解得不够多，我只能说 /MonsterPWA/manifest.json 不存在但 /manifest.json 存在。也许你只需要编辑index.html¯\_(ツ)_/¯

我不知道为什么，如何或发生了什么，但它现在正在工作......它整天给我错误我一直在改变小东西，我在 10 分钟前放弃了，它在刷新后才工作。 ...但谢谢...我不知道修复是什么

【参考方案2】：

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

资源解释为样式表，但使用 MIME 类型 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 Hosting 寻找它的地方。

---

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

【讨论】：

是的，正如 Phil 所说，构建功能似乎是有原因的，它占用了我的 github 主页并将其用作构建文件夹的一部分。当我试图将我的应用程序从 github pages 更改为 firebase 时，我根本没有考虑过。谢谢。

我仍然收到错误：资源解释为样式表，但使用 MIME 类型文本/html 传输："https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css". 我从***.com/questions/22631158/… 复制了答案，在构建文件夹中看起来像@987654328 @