Javascript firebase部署和托管React应用程序时获取空白页_Javascript_Reactjs_Firebase_Firebase Hosting

Javascript firebase部署和托管React应用程序时获取空白页

javascript reactjs firebase

Javascript firebase部署和托管React应用程序时获取空白页,javascript,reactjs,firebase,firebase-hosting,Javascript,Reactjs,Firebase,Firebase Hosting,在通过firebase部署后，当我进入我的网站域时，我得到了一个空白页-我知道我做错了什么，就是我在运行firebase init时对覆盖我的索引/html文件的选项说了（是）我尝试通过各种方法来解决它，我已经在FixBasic中用我的原件替换了Buffx.html文件，并添加了所需的基础和脚本标签，所以现在至少空白页加载和反应app名称和登录选项卡显示它正在加载它。但是，内容没有显示出来我已尝试将我的firebase.json更改为[“hosting”：{“public”：“dist”，]

在通过firebase部署后，当我进入我的网站域时，我得到了一个空白页-我知道我做错了什么，就是我在运行firebase init时对覆盖我的索引/html文件的选项说了（是）

我尝试通过各种方法来解决它，我已经在FixBasic中用我的原件替换了Buffx.html文件，并添加了所需的基础和脚本标签，所以现在至少空白页加载和反应app名称和登录选项卡显示它正在加载它。但是，内容没有显示出来

我已尝试将我的firebase.json更改为[“hosting”：{“public”：“dist”，]与最初的[“hosting”：{“public”：“build”，]一样，但这没有起作用，因为我在cmd上遇到此错误：错误：指定的公用目录“dist”不存在，无法将主机部署到站点

相关代码如下，如果您需要更多代码片段，请发表评论

Build/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <base href="https://contact-form-fba60.firebaseapp.com/">
  <script type="text/javascript" src="https://contact-form-fba60.firebaseapp.com/runtime.a66f828dca56eeb90e02.js"></script>
  <script type="text/javascript" src="https://contact-form-fba60.firebaseapp.com/main.2eb2046276073df361f7.js" ></script>
  <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>

package.json（不确定是否需要）

尝试“public”：“/”

在将URL重写到index.html时，应选择“N”

因此，我建议您重新进行firebase初始化。

在将URL重写到index.htmls时，您应该选择“N”，以便澄清，要做到这一点，我需要重新执行整个过程？如在firebase init中一样-如果是这样，我确实需要删除所有已创建的firebase文件并创建新的构建文件夹？是的。您应该重新启动firebase托管构建文件夹。所以基本上我保留了我的“公共”：“构建”然后重新运行npm运行构建，然后进行firebase部署-我的网站现在显示在-但不在我的域名msdevelop.co.uk上。您以前遇到过这个问题吗？您可以在浏览器的firebase开发者控制台中连接该域。如果您解释为什么您认为您的建议有助于e OP.谢谢您刚刚尝试了这个，但没有改变空白屏幕

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

{
  "name": "my-website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.1",
    "@testing-library/user-event": "^12.2.2",
    "animate.css": "^4.1.1",
    "axios": "^0.21.0",
    "bootstrap": "^4.5.3",
    "firebase": "^8.1.1",
    "react": "^17.0.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
    "react-icons": "^3.11.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "prettier": "2.2.0"
  }
}