Firebase react.js 应用部署 - 空白页面
Posted
技术标签:
【中文标题】Firebase react.js 应用部署 - 空白页面【英文标题】:Firebase react.js app deployed - blank page 【发布时间】:2020-07-19 02:35:56 【问题描述】:我是第一次使用 Firebase,我部署了一个我知道可以正常工作并托管在 github 页面上的 react 应用程序。我按照 Firebase 文档提供的说明将应用程序部署到他们的网站。在加载网站时,我看到一个空白页面。
链接:https://monsterpwa.web.app/
firebase.json 文件:
"hosting":
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
"source": "**",
"destination": "/index.html"
]
这里之前的帖子都是关于更改为构建的公共部分。除此之外,我找不到其他有类似问题的人。
控制台记录和错误,在第一行第 1 列中存在意外标记“
清单文件:
"short_name": "Monster App",
"name": "Monster App D&D Spells and Items",
"icons": [
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
,
"src": "/public/media/800x800.png",
"type": "image/png",
"sizes": "800x800"
],
"start_url": "./index.html",
"display": "standalone",
"background_color": "#2d4059;",
"theme_color": "#2d4059",
"orientation": "portrait-primary"
构建
Build
--> Media -- > *empty*
--> static -- > css / js --> each contains two files. main.7bf83f0f & the map version & main.3267ab84 and the map version.
asset-manifest.json
favicon.ico
index.html
manifest.json
service-worker.js
worker.js
亲切的问候,
雪
【问题讨论】:
哪个文件给您带来了意外的令牌错误?您是否尝试过将其设置为公开而不是构建? 点击控制台中的链接。您的main.js
文件实际上正在加载 index.html
内容
您能展示一下您的build
目录的内容是什么样的吗?
抱歉,jamargolisvt,我没想到会这么快得到回复,*** 上有答案,我应该将其设置为公开,我将尝试将其设置为公开并发布我的情况。 @Phil 我发现也是如此,但我不知道为什么..当然我会在编辑中添加它。
我把上面的构建放在一个编辑中,因为它在回复部分不可读
【参考方案1】:
问题是您已将应用配置为在 /MonsterPWA
目录中查找资产,但该目录似乎不存在。
例如,您的index.html
文件有
<script type="text/javascript" src="/MonsterPWA/static/js/main.3267ab84.js"></script>
但该文件实际上在/static/js/main.3267ab84.js
可用。
您的重写规则是捕获所有不存在的文件请求并返回index.html
,因此会发出关于<
的警告。
检查package.json
和/或PUBLIC_URL
环境变量中的homepage
配置。
【讨论】:
是的,你 100% 正确,而且我的目录中也没有这样的文件夹,这只存在于构建中。这个应用程序的“主页”设置为我的github页面,我觉得这是错误的。谢谢!首先使用 firebase 的原因是因为该应用程序在 github 页面上也没有按预期工作,并且有人告诉我 github 页面是静态的,不能做我想做的事情。 进行更改以包含 MonsterPWA 文件夹后,我仍然得到一个空白网页和相同的“找不到 css”错误。 \build\MonsterPWA\static\css\main.7bf83f0f.css C:\Users\locks\Desktop\EditMonster\build\MonsterPWA\static\js\main.3267ab84.js 错误:monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css"。 除了您的manifest.json
文件外,我觉得一切正常。我对你的构建系统(或者一般的 React,我更喜欢 Vue 的粉丝)了解得不够多,我只能说 /MonsterPWA/manifest.json
不存在但 /manifest.json
存在。也许你只需要编辑index.html
¯\_(ツ)_/¯
我不知道为什么,如何或发生了什么,但它现在正在工作......它整天给我错误我一直在改变小东西,我在 10 分钟前放弃了,它在刷新后才工作。 ...但谢谢...我不知道修复是什么【参考方案2】:
如果您检查浏览器的 JavaScript 控制台,则会显示加载 CSS 时出现问题。
资源解释为样式表,但使用 MIME 类型 text/html 传输:“https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css”。
Uncaught SyntaxError: Unexpected token '
通过查看“网络”选项卡,我们可以看到它正在加载此 URL https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css
,但返回的是 HTML(由于您的重写规则)。
确保您的 CSS 生成到 build/MonsterPWA/static/css/main.7bf83f0f.css
,因为这是 Firebase Hosting 寻找它的地方。
编辑:快速检查显示 CSS 确实存在于 https://monsterpwa.web.app/static/css/main.7bf83f0f.css
,因此位于 build/static/css/main.7bf83f0f.css
。
【讨论】:
是的,正如 Phil 所说,构建功能似乎是有原因的,它占用了我的 github 主页并将其用作构建文件夹的一部分。当我试图将我的应用程序从 github pages 更改为 firebase 时,我根本没有考虑过。谢谢。 我仍然收到错误:资源解释为样式表,但使用 MIME 类型文本/html 传输:"https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css".
我从***.com/questions/22631158/… 复制了答案,在构建文件夹中看起来像@987654328 @以上是关于Firebase react.js 应用部署 - 空白页面的主要内容,如果未能解决你的问题,请参考以下文章
是否有使用 react.js 和 firebase 的简单 CRUD 示例应用程序?
在React.js应用上从firebase中获取和显示图片。
在 React.JS 中刷新后,如何让用户保持登录到 firebase?
使用 node.js 和 react.js 客户端启动一个 firebase 功能项目
@firebase/firestore:Firestore (8.6.2):无法访问 Cloud Firestore 后端(React Js)