基于Vite的React SPA页面空白，如何修复Vite配置？

问题现象 #

使用Vite构建React单页应用，页面始终空白，无法渲染内容。移除react-router-dom直接渲染Home组件仍无效果，index.html可正常加载，但JSX文件无法渲染。

相关代码文件 #

./src/app.jsx #

import ReactDOM from 'react-dom/client';
import { HashRouter, Routes, Route } from 'react-router-dom';
import '../index.css';
import Home from './Pages/Homepage/homepage.jsx';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>
);

./src/Pages/Homepage/homepage.jsx #

import React from 'react';
import valentinesGif from '../../../Dependencies/saintvalentineday.gif';
import './homepage.css';

function Home() {
  return (
    <div className="home-container">
      <img src={valentinesGif} alt="Valentine's Day" className="centered-gif" />
      <div className="button-container">
        <button>Button 1</button>
        <button>Button 2</button>
      </div>
    </div>
  );
}

export default Home;

vite.config.js #

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  server: {
    strictPort: true,
    port: 8888,
    open: true,
  },
});

index.html（根目录） #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/6483512793.js" crossorigin="anonymous"></script>
  <body>
    <div id="root"></div>
  </body>
</html>

排查与解决步骤 #

1. 补全入口脚本引用
   你的index.html缺少Vite加载React入口文件的关键脚本，在</body>标签前添加：

   <script type="module" src="/src/app.jsx"></script>
   

   Vite需要通过这行代码识别并加载React应用的入口，否则只会渲染静态HTML，不会执行JSX逻辑。

2. 校验依赖完整性
   运行命令重新安装依赖，确保所有核心包都正确安装：

   npm install react react-dom react-router-dom @vitejs/plugin-react vite
   

3. 检查文件路径正确性
   确认Dependencies/saintvalentineday.gif的实际位置与导入路径一致，路径错误会导致模块加载失败，可通过浏览器控制台查看具体报错。

4. 查看控制台错误信息
   打开浏览器开发者工具（F12）的Console标签，模块加载失败、语法错误等问题都会在这里显示具体原因，是定位问题的关键。

5. 简化代码逐步测试
   先把App组件简化为最基础形式，排除其他干扰：

   import ReactDOM from 'react-dom/client';
   
   function App() {
     return <h1>Hello React</h1>;
   }
   
   const root = ReactDOM.createRoot(document.getElementById("root"));
   root.render(<App />);
   

   若能正常渲染，再逐步加回react-router-dom和Home组件，定位具体问题点。

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