当 React 应用程序由 firebase 部署和托管时出现空白页面
通过 firebase 部署网站域后，我收到一个空白页面 - 我知道我做错了什么，我对运行 firebase init 时覆盖索引/html 文件的选项说了（是）。
我尝试通过各种方法解决这个问题，我已经替换了 firebase 生成的 build 文件夹中的 index.html 文件，并添加了所需的基本和脚本标签，所以现在至少加载了空白页面和 React 应用程序名称登录选项卡显示它正在加载。但是内容没有显示。
我尝试将 firebase.json 更改为 ["hosting": {"public": "dist",] 因为它最初是 ["hosting": {"public": "build",] 但是这并没有像我那样工作在 cmd 上收到此错误：错误：指定的公共目录“dist”不存在，无法将托管部署到站点...
相关代码如下，如果您需要更多代码片段，请评论。
构建/index.html
<!DOCTYPE html>
<html>
<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>
</html>
繁华开满天机3回答
-
aluckdog
将 URL 重写为 index.html 时应选择“N”。所以，我建议你重做firebase初始化。 -
凤凰求蛊
尝试“公共”：“./” -
守着星空守着你
您需要设置PUBLIC_URLwebpack 构建包所需的环境变量。在生成的 html 中，文件中不应包含%PUBLIC_URL%字符串，build /index.html例如：<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />，它应该有完整的 url，例如：<link rel="icon" href="https://<your-app-name>.firebaseapp.com/favicon.ico" />要解决这个问题：GitHub部分：转到 Githup 中的存储库，然后单击 repo settings。在存储库设置侧栏上，展开Secrets and variables菜单项，然后单击actions。在页面上Actions secrets and variables，单击Variables选项卡，然后单击New repository variable。在页面上Actions variables / New variable填写，然后单击。NamePUBLIC_URLValuehttps://<your-app-name>.firebaseapp.comAdd variable回购代码部分：打开.github/workflows/firebase-hosting-merge.yml并添加env: PUBLIC_URL: ${{ vars.PUBLIC_URL }}上面的name: Deploy to Firebase Hosting on merge线。提交更改并推送。注意：确保将 firebase 托管公共目录设置为文件build中firebase.json。{ "firestore": { "rules": "firestore.rules", "indexes": "firestore.indexes.json" }, "hosting": { "public": "build", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ] }}
随时随地看视频慕课网APP
相关分类
JavaScript