基于模板的React应用部署到Firebase后显示空白页面求助

核心问题根源 #

你的部署故障主要来自package.json的homepage配置错误，以及单页应用路由重写的配合问题：

1. homepage路径错误：package.json里的"homepage": "https://www.edyou.org/home"会让create-react-app在build时，把所有静态资源（js、css、manifest）的路径都设置为相对于/home的相对路径。但Firebase Hosting的静态资源实际部署在根目录的build文件夹下，导致资源加载路径完全错误：

   • 开启rewrite（选Y）时，服务器会把所有资源请求重写到index.html，浏览器会把html内容当成js解析，因此出现Unexpected token '<'错误。
   • 关闭rewrite（选N）时，浏览器请求/home/static/js/xxx.chunk.js这类路径，但实际文件在/static/js/xxx.chunk.js，所以返回404。

2. 单页应用路由重写需求：使用react-router的单页应用必须开启rewrite（选Y的firebase配置），否则刷新页面或直接访问子路由时会返回404，但前提是资源路径配置正确。

分步解决方案 #

1. 修正package.json的homepage配置 #

打开package.json，将homepage字段修改为"/"，或者直接删除该字段（create-react-app默认以根目录作为资源路径）：

{
  // ...其他配置
  "homepage": "/"
}

2. 使用正确的firebase.json配置（开启rewrite） #

保留带rewrites的配置，这是单页应用的必需设置：

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

3. 重新构建并部署 #

执行以下命令：

npm run build
firebase deploy

额外说明：jsconfig.json的作用 #

你提到的jsconfig.json是用来配置React项目的模块解析路径的，它让你可以直接用import theme from "assets/theme"代替import theme from "../assets/theme"这类相对路径，本身没有问题，不是导致部署失败的原因。

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