使用Vite构建的React应用在localhost打开时显示空白白屏求助

1. 配置Vite的基础路径（base） #

• 在vite.config.js/vite.config.ts中设置base字段，匹配你的子路径。比如你的访问路径是http://localhost/F1-Hybrid-Data/f1-app/，那么base应该设为/F1-Hybrid-Data/f1-app/：

  export default defineConfig({
    base: '/F1-Hybrid-Data/f1-app/',
    // 其他配置...
  })
  

• 修改后重启npm run dev，再访问测试。

2. 检查React Router的basename配置（如果使用路由） #

• 如果你用了React Router，需要给<BrowserRouter>设置basename属性，和Vite的base保持一致：

  import { BrowserRouter } from 'react-router-dom';
  
  ReactDOM.createRoot(document.getElementById('root')).render(
    <BrowserRouter basename="/F1-Hybrid-Data/f1-app">
      <App />
    </BrowserRouter>
  );
  

3. 验证静态资源引用路径 #

• 检查项目中引用的图片、字体等静态资源，避免使用绝对路径（比如/src/assets/image.png），改用相对路径（./src/assets/image.png）或者Vite的import方式引入资源：

  import logo from './assets/logo.png';
  // 组件中使用 <img src={logo} alt="logo" />
  

4. 确认根元素挂载正常 #

• 检查index.html中的根元素（通常是<div id="root"></div>）是否存在，且React代码正确挂载到该元素：

  <!-- index.html -->
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
  

• 确保main.jsx/main.tsx中的挂载代码无错误：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  
  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  

5. 模拟部署环境测试dev服务 #

• 启动dev服务器时添加--base参数，模拟子路径环境，更贴近部署后的情况：

  npm run dev -- --base=/F1-Hybrid-Data/f1-app/
  

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