使用 firebase 部署后，React 网站未显示答案

【问题标题】：React website not showing after deployment with firebase使用 firebase 部署后，React 网站未显示
【发布时间】：2020-06-01 19:29:36
【问题描述】：

第一次尝试部署到 firebase 时，我查看了 youtube 上的很多指南，stackoverflow 的做法与他们相同，但部署应用后总是出现空白页。

这是我的流程：

-纱线构建

-firebase 登录

-firebase 初始化

这就是我填充初始化的方式：

托管：配置和部署 Firebase 托管站点

2.你想用什么作为你的公共目录？构建

3.配置为单页应用（将所有url重写为/index.html）？否

4.文件 build/404.html 已经存在。覆盖？否

5.文件 build/index.html 已经存在。覆盖？（y/N）否

我尝试了几种方法，有时我将其中一些更改为 Yes，结果仍然相同

-firebase 部署

我的文件是这样的：

这是我的路由器的代码：

const App = () => {
  return (
    <div>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" exact component={About} />
        <Route path="/brands" exact component={Brands} />
        <Route path="/guide" exact component={Guide} />
        <Route path="/contact" exact component={Contact} />

        <Route
          render={function() {
            return <p>Not found</p>;
          }}
        />
      </Switch>
    </div>
  );
};

我遇到的错误：

更新：

这是现在的屏幕：

更新：

新的错误：

【问题讨论】：

你应该做的是重定向到 index.html create-react-app.dev/docs/deployment/#firebase
@AlexanderStaroselsky 仍然给我空白页..
如果是空白页，请检查浏览器的开发工具。它可能正在渲染 HTML，但遇到了 JavaScript 问题。
@abraham 它没有告诉我开发工具不知道为什么，但控制台中有错误.. 我编辑帖子并添加了屏幕截图。您认为这是问题的原因吗？
这个错误意味着那些被填充的 JavaScript 没有被部署或者不是 HTML 试图从中加载它们的地方。也许尝试再次构建和部署。

标签： reactjs firebase react-router firebase-hosting

【解决方案1】：

运行：

% firebase login
% firebase init

选择“托管 - 使用 firebase”
选择是覆盖
选择构建
选择不使用 Github 部署
运行：

% npm run build
% firebase deploy

【讨论】：

【解决方案2】：

您需要在 firebase.json 文件中为 service-worker.js 文件设置正确的 HTTP 缓存标头，否则您将无法在首次部署后看到更改（问题 #2440）。它应该像下一个一样添加到“托管”键中。看到这个：

https://create-react-app.dev/docs/deployment/#firebase

【讨论】：

【解决方案3】：

build 中的 index.html 文件可能在 firebase init 过程中被覆盖。发生这种情况时，firebase 会使用其默认模板结构覆盖文件，从而覆盖该模板的原因。如果公用文件夹中的index.html 文件仍然有您所需的模板，请删除build 文件夹以及firebase 生成的文件和文件夹（不是真正的要求，只是为了保持内容更清洁和新鲜）即.firebase文件夹，.firebaserc 和 firebase.json 文件，然后：

运行 npm run build 或 yarn build，具体取决于您的包管理器
运行firebase login 并填写必要的要求（如果已登录则跳过）
运行firebase init
选择Hosting选项（使用箭头键导航，使用空格键选择。选择后输入）
选择现有的 Firebase 应用或创建一个新应用
键入build 选择文件夹
输入/选择 yes 以获得单页应用选项
键入/选择 no 以避免 firebase 覆盖文件
运行firebase serve --only hosting 进行测试
运行firebase deploy

【讨论】：

【解决方案4】：

转到您的 firebase.json 文件并确保“hosting”下的“public”键设置为“build”，如下所示：

"hosting": {
"public": "build"
}

当您运行 firebase init 时，它可能默认设置为“public”。在这种情况下，它看起来像这样：

"hosting": {
"public": "public"
}

默认设置的问题是，当您运行 npm run build 时，React 会将您所有的静态资产放在“build”目录中，因此您希望将 firebase 指向该目录。

我遇到了同样的问题，这对我有用。

【讨论】：

【解决方案5】：

首先，根据您使用的内容，您可以使用 npm build 或 yarn build。
然后进行 Firebase 登录。
然后 firebase init - 选择托管，然后选择构建而不是自动为您生成的公共。
然后您选择是，然后选择否。
然后进行部署。

【讨论】：

【解决方案6】：

我在使用 firebase 之前尝试部署到 github，因此 package.json 中留下了一个“主页：”字段。我需要做的就是删除这个字段并重建和重新部署，一切正常

【讨论】：