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

Question

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

\n\n

这是托管站点的链接：https://physicals-coach.firebaseapp.com/ \n这里是该站点的 github 存储库的链接：https://github.com/occam98/physicalscoach2

\n\n

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

\n\n

\n

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

\n\n

对于 CDN 构建，可以通过以下方式使用这些\n（替换为组件的名称 - 即身份验证、数据库\n 等）：

\n\n

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

\n

\n\n

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

\n

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"实际上不会包含运行命令中的任何 HTML/JS/CSS 资源npm run build。create-react-app 生产构建 命令npm run build将所有已编译的 HTML/JS/CSS 资源生成到目录"build"：

npm run build 使用应用程序的生产版本创建一个构建目录。build/static 目录中将包含 JavaScript 和 CSS 文件。build/static 中的每个文件名都将包含文件内容的唯一哈希值。文件名中的哈希值支持长期缓存技术。

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

此示例还包括排除服务工作线程文件的配置以及为了使用路由器（例如react-router-dom. 如果它们不以任何方式适用于您的项目，您可以将其删除。

更新： 此外，constants.js您还应该将 Firebase 导入更新为以下内容以解决警告。假设您使用 Firebase Auth 和 Firebase 实时数据库：

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

希望这有帮助！