reactjs 当React应用程序由Firebase部署和托管时获得空白页面

我得到一个空白页，当我去我的网站域后，通过firebase部署它-我知道我做错了什么，这是我说（是）的选项覆盖我的索引/html文件时，运行firebase init。
我已经尝试过各种方法来解决这个问题，我已经用我的原始文件替换了firebase生成的build文件夹中的index.html文件，并添加了所需的base和script标签，所以现在至少空白页面加载和React 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>

firebase.json

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

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

{
  "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"
  }
}

您需要设置PUBLIC_URL环境变量，这是webpack构建bundle所需的。
在生成的html中，您不应该在build /index.html文件中包含%PUBLIC_URL%字符串，例如：<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />，它应该有一个完整的url，例如：<link rel="icon" href="https://<your-app-name>.firebaseapp.com/favicon.ico" />
要修复它：

Github部分：

1.转到Githup中的repo，然后单击repo settings。
1.在存储库设置侧边栏中，展开Secrets and variables菜单项，然后单击actions。
1.在Actions secrets and variables页面上，单击Variables选项卡，然后单击New repository variable。
1.在Actions variables / New variable页面上，用PUBLIC_URL填充Name，用https://<your-app-name>.firebaseapp.com填充Value，然后单击Add variable。

回购代码部分：

1.打开.github/workflows/firebase-hosting-merge.yml并添加

env:
  PUBLIC_URL: ${{ vars.PUBLIC_URL }}

name: Deploy to Firebase Hosting on merge线以上。
1.提交更改并推送。

注意：请确保在firebase.json文件中将firebase hosting public目录设置为build。

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

我希望这将解决这个问题。

reactjs 当React应用程序由Firebase部署和托管时获得空白页面

3条答案

相关问题

热门标签

最新问答