Vite React项目构建后index.html空白，Firebase部署显示空白页求助

1. 修正Vite资源基础路径配置 #

Vite默认使用绝对路径(/)作为资源根目录，本地直接打开index.html或部署到非域名根路径时，会出现资源加载失败的情况。修改项目根目录下的vite.config.js（或.ts）：

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

export default defineConfig({
  plugins: [react()],
  base: './' // 将资源路径改为相对路径
})

修改后重新执行npm run build，再打开dist文件夹里的index.html即可正常加载内容。

2. 调整Firebase Hosting配置 #

如果部署到Firebase Hosting，除了上述base配置，还需确保firebase.json的重写规则正确，避免单页应用路由刷新时出现404：

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

配置完成后重新执行部署命令：firebase deploy --only hosting

3. 排查浏览器控制台报错 #

打开空白页面时按F12调出开发者工具，查看控制台的错误信息。如果是资源加载404，可直接确认路径配置问题；如果是路由相关错误，可选择将React Router的BrowserRouter替换为HashRouter，或保持BrowserRouter配合上述Firebase重写规则使用。

4. 验证构建产物路径 #

执行npm run build后，检查dist目录下的index.html，确认其中引用的js、css文件路径为相对路径（例如./assets/index.xxx.js），而非绝对路径(/assets/...)。

内容的提问来源于stack exchange，提问作者Miles Andray Casilao