Firebase 托管网站不会加载（但会在本地加载）

Question

我已经构建了一个以 create-react-app 开头的 react 应用程序，该应用程序似乎在本地开发中运行良好。我已经使用firebase deploy将它上传到firebase托管，当我在我的计算机上使用chrome加载它时，托管版本工作正常，但托管站点无法使用firefox或任何其他浏览器加载。托管站点也无法在其他计算机上使用任何浏览器（包括 chrome）加载。

这是托管网站的链接：https://physics-coach.firebaseapp.com/ 这是此站点的 github 存储库的链接：https://github.com/occam98/physicscoach2

我尝试使用开发人员工具进行故障排除，但似乎没有取得太大进展——当网站加载失败时，我在控制台中收到的唯一消息是：

您似乎正在使用 Firebase JS 的开发版本 开发工具包。将 Firebase 应用部署到生产环境时，建议 仅导入您打算使用的各个 SDK 组件。

对于 CDN 构建，这些可通过以下方式获得 （替换为组件的名称 - 即 auth、数据库、 等）：

https://www.gstatic.com/firebasejs/5.0.0/firebase-.js rollbar.min.js:2:24504

如果能提供有关如何解决此问题的故障排除建议，我将不胜感激。

Answer 1

尝试将您的 firebase.json 内容更改为：

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "/service-worker.js",
        "headers": [{ "key": "Cache-Control", "value": "no-cache" }]
      }
    ]
  }
}

您当前的firebase.json 指向文件夹"public"，它实际上不会包含来自运行命令npm run build 的任何HTML/JS/CSS 资产。 create-react-app production build 命令npm run build 生成所有编译好的HTML/JS/CSS资源到目录"build":

npm run build 创建一个包含生产构建的构建目录 你的应用程序。在 build/static 目录中将是您的 JavaScript 和 CSS 文件。 build/static 中的每个文件名都包含一个 文件内容的唯一哈希。文件名中的此哈希启用 长期缓存技术。

更新配置，执行npm run build后firebase deploy重新构建重新部署。

此示例还包括对exclude service worker files 的配置以及重写规则以使用诸如react-router-dom 之类的路由器。如果它们以任何方式不适用于您的项目，您可以删除它们。

更新： 同样在 constants.js 中，您应该将 Firebase 导入更新为以下内容以解决警告。这假设您使用的是 Firebase Auth 和 Firebase 实时数据库：

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';

希望对您有所帮助！