Firebase deploy部署后出现空白页问题咨询，相关配置及代码已提供

核心问题根因 #

• 部署目录配置不匹配：firebase.json中hosting.public配置为build，默认读取项目根目录下的build文件夹作为部署资源，但实际编译后的产物存放在src/app/build路径下，路径不一致导致Firebase部署了错误的资源。
• 部署了未编译的原始HTML：提供的index.html中没有打包后自动插入的css、js资源引用标签，说明部署的是public目录下未经编译的原始文件，而非编译后生成的带资源引用的index.html，浏览器加载后找不到渲染所需的JS代码，因此显示空白。
• %PUBLIC_URL%是Create React App的内置变量，仅在编译阶段会被自动替换为正确的公共路径，直接手动修改原始index.html中的该变量无法解决路径问题。

具体解决步骤 #

1. 调整firebase.json的部署路径配置，把public字段的值改为实际的编译产物路径：

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

2. 恢复public/index.html中之前手动删除的%PUBLIC_URL%前缀，不要直接修改原始模板文件中的该变量。
3. 在项目根目录执行编译命令生成最新的生产环境产物：

npm run build
# 使用yarn的话执行 yarn build

4. 编译完成后先本地验证src/app/build/index.html，确认文件中已经自动插入了类似<script src="/static/js/main.xxxx.js"></script>的JS资源引用。
5. 本地验证无误后，执行部署命令：

firebase deploy

6. 部署完成后清空浏览器缓存再访问站点即可。

内容的提问来源于stack exchange，提问作者Guillaume Ayad