Vite 项目中 main.tsx 因路径错误导致浏览器加载失败、触发 MIME 类型校验错误（text/plain），进而造成页面完全黑屏——根本原因在于 HTML 中 标签引用了未被开发服务器识别的原始 TSX 文件路径，而非经 Vite 处理后的模块入口。
vite 项目中 `main.tsx` 因路径错误导致浏览器加载失败、触发 mime 类型校验错误（`text/plain`），进而造成页面完全黑屏——根本原因在于 html 中 `<script>` 标签引用了未被开发服务器识别的原始 tsx 文件路径，而非经 vite 处理后的模块入口。</script>
你的 index.html 中这行代码是问题核心：
<script type="module" src="./main.tsx"></script>
❌ 错误原因解析：
Vite 开发服务器（vite dev）不会直接提供 .tsx 源文件的 HTTP 服务。它只将 /src/main.tsx 作为构建入口，经 TypeScript 编译、模块解析、HMR 注入后，暴露为一个合法的 ES 模块 URL（如 /@vite/client + /src/main.tsx 的转换版本）。而 ./main.tsx 是相对路径，浏览器会尝试向当前目录（即根 /）发起请求，实际返回的是原始文本文件（MIME = text/plain），违反了 <script type="module"></script> 要求的 application/javascript 类型，因此被严格拦截，脚本不执行 → #root 无渲染 → 全屏空白。
✅ 正确做法：确保路径由 Vite 服务接管
Vite 约定：所有源码必须放在 src/ 目录下，且 HTML 中引用的入口路径应为 以 /src/ 开头的绝对路径（Vite 会自动拦截并处理该请求）：
<!-- ✅ 正确：Vite 开发服务器能识别并编译 /src/main.tsx --> <script type="module" src="/src/main.tsx"></script>
? 验证方式：在浏览器中直接访问
http://localhost:5173/src/main.tsx（假设端口为 5173），若能看到编译后的 JS 内容（非原始 TSX），说明路径已生效；若返回 404 或纯文本，则项目结构或启动方式有误。
? 额外关键检查项（缺一不可）：
-
确认文件结构符合 Vite 规范
React Best Practices 2 0.1.0下载React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
your-project/ ├── index.html ← 必须位于项目根目录 ├── src/ │ ├── main.tsx ← 入口文件 │ └── App.tsx ├── package.json └── ...
若
main.tsx实际在src/子目录（如src/app/main.tsx），则 HTML 中需写src/app/main.tsx。 -
确认使用正确的开发命令启动
运行以下任一命令（推荐）：npm run dev # 或 pnpm dev # 或 yarn dev
⚠️ 不要直接用
npx vite（缺少vite.config.ts上下文可能降级行为）或双击打开index.html（绕过 Vite 服务，必然失败）。 -
检查控制台是否有其他阻断性错误
即使修复 MIME 错误，若App.tsx中存在语法错误、未安装依赖（如react-dom版本不匹配）或StrictMode下的非法 hook 调用，仍会导致白屏。可在main.tsx顶部临时添加兜底错误日志：// src/main.tsx window.addEventListener('error', (e) => { console.error('Global error:', e.error); });
? 进阶建议：启用 Vite 的 server.strictPort 和 clearScreen 提升调试体验
在 vite.config.ts 中配置：
export default defineConfig({
server: {
strictPort: true, // 端口被占用时直接报错，避免静默切换
clearScreen: true, // 启动/热更时清屏，避免旧日志干扰
}
})✅ 验证流程总结：
- 修改
index.html中 script 路径为<script type="module" src="/src/main.tsx"></script>； - 确保
main.tsx在src/目录下； - 运行
npm run dev启动 Vite； - 访问
http://localhost:5173—— 此时应正常显示 Todo 列表，控制台无MIME报错。
? 补充说明：生产环境构建（
npm run build）后，Vite 会将main.tsx编译为标准 JS 并输出到dist/，此时index.html中的 script 标签会指向生成的assets/index.xxxx.js，与开发期路径逻辑完全不同——切勿混淆开发与构建阶段的资源引用规则。
