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

Question

第一次尝试部署到 firebase 时，我查看了 youtube 上的很多指南，stackoverflow 和他们所做的一样，但在部署应用程序后仍然出现空白页面。

这是我的过程：

-纱线构建

-firebase 登录

-firebase 初始化

这就是我填写init的方式：

1. 托管：配置和部署 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>
  );
};

我有的错误：

更新：

这是现在的屏幕：

更新：

新的错误：

Answer 1

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

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

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

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

默认的问题是当你运行 npm run build 时，React 将你所有的静态资产放在“build”目录中，所以这是你想要将 firebase 指向的地方。

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

Answer 2

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

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