Vite+React+TypeScript项目页面无法加载问题求助

核心问题与修复步骤 #

1. 补全根组件挂载代码

你的index.tsx仅导出了Index组件，但没有执行将组件挂载到DOM节点的关键步骤，这是页面无法显示的核心原因。普通React项目通常会在入口文件中包含挂载逻辑，Vite环境下同样需要补充：

修改index.tsx如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import Loadable from '@loadable/component';

function LoadingComponent(props: any) {
    return <div />;
}

const HomeLazy = Loadable({
    loader: () => import('./containers/Home'),
    loading: LoadingComponent,
});

const Index = () => {
    return (
        <>
            <HomeLazy />
        </>
    );
};

// 新增挂载逻辑，将组件渲染到指定DOM节点
ReactDOM.createRoot(document.getElementById('Index')!).render(
    <React.StrictMode>
        <Index />
    </React.StrictMode>
);

2. 确认Loadable依赖的安装与导入

确保已正确安装懒加载依赖：

npm install @loadable/component
# 或使用yarn
yarn add @loadable/component

同时检查index.tsx顶部是否导入了Loadable，避免因运行时缺失依赖导致的隐性问题（控制台无报错可能是因为类型定义存在但实际代码未加载）。

3. 检查Vite入口文件配置

打开vite.config.ts（没有则创建），确保入口文件指向index.tsx：

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

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        main: './src/index.tsx', // 确认入口路径正确
      },
    },
  },
});

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