Question

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

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

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

您似乎正在使用Firebase JS的开发版本   SDK。将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';

希望有帮助！

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

1 个答案: