部署React应用至Firebase后显示默认欢迎页面问题求助

核心问题分析 #

部署后显示Firebase默认欢迎页，主要是Firebase Hosting未正确指向React项目的构建产物目录，同时你的配置和部署流程存在两个关键问题：

1. 修正firebase.json的public目录配置 #

你的firebase.json中public字段设为"y"，这是无效路径，Firebase找不到正确的静态资源目录，因此 fallback 到默认页面。

根据你的React项目类型修改配置（同时添加路由兼容规则，适配BrowserRouter）：

• 若使用Create React App，构建产物目录为build：

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

• 若使用Vite，构建产物目录为dist：

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

备注：rewrites规则用于避免单页应用刷新页面时出现404错误，必须适配BrowserRouter添加。

2. 确保项目已完成构建 #

Firebase Hosting需要部署的是打包后的静态文件，而非源码（你提供的index.js是开发源码，无法直接被Firebase识别）。

在项目根目录执行打包命令：

# npm 用户
npm run build

# yarn 用户
yarn build

# pnpm 用户
pnpm run build

执行完成后，检查对应的build/dist目录，确认里面包含index.html、static（或assets）等静态资源文件。

3. 重新部署项目 #

完成上述两步后，重新运行部署命令：

firebase deploy

此时访问你的Firebase Hosting域名，即可正常显示React应用。

内容的提问来源于stack exchange，提问作者Waqas Khan Roghani