Firebase Hosting部署React应用：index.html与index.js指向问题修复咨询

核心原因 #

React应用的源码入口是index.js，但生产环境必须先构建成静态文件，最终部署的是构建后的index.html（它会自动加载编译好的JS bundle）。你当前的问题大概率是直接部署了源码文件夹，而非构建产物。

解决步骤 #

1. 先构建React应用 #

在项目根目录执行构建命令：

npm run build
# 或 yarn build

执行完成后，会生成build（Create React App默认）或dist（Vite等工具）文件夹，里面包含编译好的静态资源和index.html。

2. 检查Firebase配置文件 #

确保firebase.json里的public字段指向构建产物文件夹：

{
  "hosting": {
    "public": "build", // 若用Vite则改为"dist"，对应你的构建输出目录
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

• public必须指向构建后的文件夹，而非源码目录。
• rewrites规则用于处理单页应用路由，确保所有路径都指向index.html，避免页面刷新出现404。

3. 重新部署到Firebase #

执行部署命令：

firebase deploy --only hosting

额外排查点 #

• 若未使用Create React App，确认构建工具的输出目录，比如Vite需在vite.config.js里设置build.outDir，再同步到firebase.json的public字段。
• 禁止直接部署源码文件夹（如src或项目根目录），Firebase Hosting仅托管静态文件，无法直接运行index.js源码。

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