React-Typescript-Vite项目本地正常，部署Firebase后路由页面空白

问题根源 #

生产环境访问/gucci/entry时页面空白，核心原因是Vite默认的资源绝对路径配置与Firebase Hosting的子路径路由不兼容：

• Vite默认将base设为'/'，构建后资源引用为绝对路径（如/assets/main.xxx.js）
• 当访问/gucci/entry时，浏览器会尝试从/gucci/assets/main.xxx.js加载资源，但实际资源部署在根目录的/assets/下，导致资源404，页面无法渲染。

解决方案 #

1. 修改Vite配置，设置相对路径base #

更新vite.config.ts，添加base: './'配置，让资源引用使用相对路径：

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

export default defineConfig({
  plugins: [react()],
  base: './' // 关键配置：使用相对路径引用资源
})

2. 配置React Router的basename #

确保BrowserRouter的basename属性匹配你的子路径前缀（比如/gucci），让路由正确识别子目录：

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter basename="/gucci"> {/* 匹配你的商店路子路径 */}
      {/* 你的路由组件 */}
    </BrowserRouter>
  );
}

如果有多个商店动态子路径，可以通过URL参数动态获取basename：

const basename = window.location.pathname.split('/')[1]; // 获取一级子目录如'gucci'
<BrowserRouter basename={`/${basename}`}>

3. 重新构建并部署 #

执行构建命令重新生成dist目录，再部署到Firebase：

npm run build
firebase deploy --only hosting

验证 #

部署完成后访问https://myprojectname.firebaseapp.com/gucci/entry，检查开发者工具的Network面板，确认资源请求路径正确（如./assets/main.xxx.js），页面即可正常渲染。

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