reactjs - 使用 firebase 部署后 react 网站未显示

Question

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

这是我的过程:

- yarn 构建

-firebase 登录

-firebase 初始化

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

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

2. 你想用什么作为你的公共(public)目录？ build

3. 配置为单页应用(将所有 url 重写为/index.html)？ 不

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

5. 文件 build/index.html 已经存在。覆盖？ (是/否) 否

我尝试了几种方法，有时我将其中一些更改为 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 会将所有静态 Assets 放在“build”目录中，因此您希望将 firebase 指向该目录。

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