Firebase react.js应用程序已部署-空白页

Question

我是第一次使用Firebase，我部署了一个react应用程序，我知道它正在运行，并且托管在github页面上。我按照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

问候，

雪地

Answer 1

问题是您已将应用程序配置为在/MonsterPWA目录中查找资产，但该目录似乎不存在。

例如，您的index.html文件具有

<script type="text/javascript" src="/MonsterPWA/static/js/main.3267ab84.js"></script>

但是该文件实际上在CCD_ 3处是可用的。

您的重写规则捕获所有不存在的文件请求并返回index.html，因此会出现关于<的警告。

检查package.json中的homepage配置和/或PUBLIC_URL环境变量。

Answer 2

如果检查浏览器的JavaScript控制台，则显示加载CSS时出现问题。

资源被解释为样式表，但使用MIME类型text/html/传输："https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css".

未捕获的语法错误：意外的标记"<">

通过查看"网络"选项卡，我们可以看到它正在加载此URLhttps://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。

Answer 3

执行以下操作：

• 运行命令：npm run build
• 检查firebase.json文件以确保它显示"；"公共"："构建"；。。如果不改变
• 运行命令：firebase deploy

去喝杯咖啡吧！