reactjs 将React项目部署到Firebase会导致显示“Firebase托管设置完成”的窗口

qxgroojn  于 2022-12-26  发布在  React
关注(0)|答案(1)|浏览(141)

我已经按照所有步骤初始化我的项目,我运行npm run build,然后我运行firebase deploy和我的URL,它给我引导我到一个默认的firebase网页,上面写着"firebase主机安装完成"
谢谢你的帮助!
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
o4tp2gmn

o4tp2gmn1#

完成演练

在开始之前,请确保您已经在FireBase中创建了项目,并且您已经在本地react项目文件夹x1c 0d1x中的firebase.js文件中使用了相同的Firebase Config
1.使用以下命令创建生成文件夹:

npm运行构建

这将在你的项目文件夹的根目录下创建一个构建文件夹。基本上构建文件是为生产优化的,在那里没有任何代码的变化。
1.使用以下工具安装Firebase CLI工具:

npm安装-g firebase工具

-g标志在这里用于全局安装它,因此可以从任何项目轻松访问它。
1.登录并初始化

firebase登录

登录时,您将被重定向到浏览器窗口,您只需使用FireBase凭据登录即可。

firebase init

firebase init中,您会被问到大量的问题,但不要担心,我会在这里指导您:
你准备好了吗?
键入y,因为我们要继续。
您要为此目录设置哪些Firebase功能?按空格键选择功能,然后按Enter键确认您的选择。
在这里,你需要选择所有的功能,你包括在你的项目,它可能是,你什么都不需要&你只是使用它免费托管。:)在我的情况下,我用Firestore和存储都在我的项目&也需要托管,所以,我选择这3使用空间&然后按回车键。

确保选择Firebase托管,其中Github操作是可选的。(参考上图中的绿色星星)。
当提示输入Firebase规则和其他类似的东西时,使用默认选项。

要选择公共目录,请确保选择build文件夹

使用这些选项,确保没有覆盖buid/index.html

1.部署我们的Web应用程序

火力基地部署

就这样,我们结束了
已部署应用程序的链接将位于终端中

相关问题