React+Vite部署Firebase Hosting空白页，资源加载404错误求助

问题描述 #

部署后网站显示空白页，控制台报404资源加载错误：

Failed to load resource: the server responded with a status of 404()
GET https://ybmslaw.web.app/assets/index-1_Sn4P3O.js net::ERR_ABORTED 404 (Not Found)
GET https://ybmslaw.web.app/assets/index-DBxq5wpG.css net::ERR_ABORTED 404 (Not Found)

检查服务器资源仅存在index.html文件，无assets文件夹。项目结构与正常运行站点一致，现有配置文件如下：

firebase.json #

{
  "hosting": {
    "public": "../ybms",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "predeploy": [
      "npm run build"
    ]
  }
}

vite.config.js #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: "dist"
  },
  base: '/'
})

已尝试调整public路径、修改资源路径、移除Vite配置项、修复依赖、清理缓存等操作，均未解决问题。

排查与解决步骤 #

1. 修正Firebase的public路径配置 #

你的Vite配置中outDir设为dist，意味着执行npm run build后，构建产物会生成在项目根目录的dist文件夹下。但当前firebase.json的public字段指向../ybms（源码目录），导致Firebase没有上传构建后的assets资源，只上传了源码目录的index.html。

修改firebase.json的public字段，确保指向Vite的构建输出目录：

{
  "hosting": {
    "public": "dist", // 若firebase.json与vite.config.js同层级，直接指向dist文件夹
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "predeploy": [
      "npm run build"
    ]
  }
}

注意：路径为firebase.json所在位置的相对路径，如果firebase.json在子目录（如firebase/），则需改为"../dist"。

2. 验证本地构建产物完整性 #

手动在项目根目录执行npm run build，检查dist文件夹是否生成了assets目录及对应的js/css文件。如果本地构建都未生成，问题出在Vite构建环节，可尝试：

• 删除node_modules和package-lock.json，重新执行npm install
• 检查Vite插件是否正常加载，确保@vitejs/plugin-react-swc安装正确

3. 确认预构建命令执行路径 #

如果firebase.json不在项目根目录，predeploy中的npm run build需要指定项目根目录路径，否则会在错误目录执行构建：

"predeploy": [
  "cd ../your-project-root && npm run build"
]

4. 强制清理Firebase缓存并重新部署 #

Firebase可能缓存旧部署内容，执行以下命令强制重新上传最新构建产物：

firebase deploy --only hosting --force

5. 验证部署文件内容 #

执行firebase hosting:download命令下载服务器上的文件，确认是否包含assets文件夹及对应资源。如果下载后仍只有index.html，需检查ignore规则是否误排除了dist/assets（当前规则不会影响，可跳过）。

总结 #

最核心的问题是firebase.json的public路径未指向Vite构建产物目录，导致Firebase未上传assets资源。修正public路径后，重新构建部署即可解决空白页和404问题。

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