Question

尝试第一次将其部署到firebase时，我在youtube上查看了很多指南，stackoverflow的功能与它们相同，但是在部署该应用程序后一直保持空白。

这是我的过程：

-纱线构建

-firebase登录

-firebase初始化

这就是我填写初始化内容的方式：

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

2. 您想用作公开目录的是什么？构建

3. 配置为单页应用程序（将所有网址重写为/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>
  );
};

我遇到的错误：

更新：

现在是屏幕：

更新：

新错误：

Answer 1

在尝试使用firebase之前，我曾尝试将其部署到github上，因此package.json中保留了一个“ homepage：”字段。我需要做的就是删除该字段，然后重新构建和重新部署，一切正常

Answer 2

首先，您要使用npm构建还是进行yarn构建。
然后登录Firebase。
然后将Firebase初始化-选择托管，然后选择构建，而不是自动为您生成的公共。
然后您选择是，然后选择否。
然后部署。

Answer 3

转到您的firebase.json文件，并确保将“主机”下的“公钥”设置为“ build”，如下所示：

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

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

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

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

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

Answer 4

在index.html过程中，build中的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

Answer 5

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

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

Answer 6

运行：

% firebase login
% firebase init

选择“托管 - 使用 Firebase”
选择是覆盖
选择构建
选择否以使用 Github 进行部署
运行：

% npm run build
% firebase deploy

Answer 7

做好 react js 项目后，做这个

firebase init 而不是公共文件夹，键入“build”文件夹，例如-
?你想用什么作为你的公共目录？构建
然后是，因为 ReactJs 总是提供单页应用程序。例如-

？配置为单页应用程序（将所有 URL 重写为 /index.html）？是
在完成 firebase init 命令后键入此命令。（现在不部署） npm run build
最后输入 firebase deploy

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

7 个答案: