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

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

这是我的过程：

-纱线构造

-firebase登录

-firebase init

我就是这样填写初始化的：

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

2.您想将什么用作公用目录？生成

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

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

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

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

-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>
  );
};

const-App=（）=>{
返回(
);
};

我的错误是：

更新：

这是现在的屏幕：

更新：

新错误：

---

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

首先，根据您使用的产品，您可以进行npm构建或纱线构建

然后登录firebase

然后firebase init-选择托管，然后选择构建，而不是自动为您生成的公共

然后你选择是，然后选择否

然后部署

---

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

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

当您运行firebase init时，它可能默认设置为“public”。在这种情况下，它将如下所示：

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

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

---

我也遇到了同样的问题，这对我很有效。

build

中的

index.html

文件可能在

firebase init

过程中被覆盖。当这种情况发生时，firebase会用其默认模板结构覆盖文件，因此也会覆盖该模板的原因。如果公用文件夹中的

index.html

文件仍有您所需的模板，请删除

build

文件夹，以及firebase生成的文件和文件夹（这不是真正的要求，只是为了保持内容更干净和新鲜），即

.firebase

文件夹、

.firebaserc

和

firebase.json

文件，然后：

运行

npm运行构建

或

纱线构建

，具体取决于您的软件包管理器

运行

firebase登录

并填写必要的要求（如果已登录，则跳过）

运行

firebase init

选择托管选项（使用箭头键导航，使用空格键选择。选择后输入）

选择现有firebase应用程序或创建新应用程序

为文件夹选择键入

build

为单页应用程序选项键入/选择

yes

键入/选择

no

，以避免firebase覆盖文件

运行

firebase服务--仅托管
进行测试

运行firebase部署

---

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

---

制作react js项目后，执行以下操作

firebase init

键入“build”文件夹而不是公用文件夹，例如-
? 您想使用什么作为公用目录构建
然后是，因为ReactJs总是提供单页应用程序。e、 g.-

?？配置为单页应用程序（将所有URL重写为

/index.html

）是

完成firebase init命令后，键入此命令。（现在不部署）

npm运行构建

最后键入

firebase部署

---

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