Vite 本身不直接提供“防白屏”功能，但可通过配置和代码层配合缓解白屏：在 index.html 的 #app 中添加加载提示、正确设置 base 路径、使用 @vitejs/plugin-legacy 兼容旧浏览器、并配置服务器 fallback 支持 history 路由。
Vite 本身不直接提供“防白屏”功能，但可以通过配置和代码层配合，显著缓解页面加载过程中的白屏现象。核心思路是：**让 HTML 先呈现基础内容，再等 Vue/React 应用接管；同时确保资源路径、模块加载和浏览器兼容性不出问题**。
在 index.html 中添加初始加载态
白屏最直观的表现是 <div id="app"></div> 长时间为空。解决办法是在该容器内写入轻量级占位内容，比如加载提示或骨架屏 HTML：
- 打开
index.html（通常在项目根目录），把空的<div id="app"></div>改为：
<div id="app"> <div class="loading-indicator">正在加载中...</div> </div>
- 配合简单 CSS（可放在
public/css/loading.css或内联 style）控制样式，避免闪烁或布局跳动； - 这个内容会在 JS 执行前渲染，用户能立刻看到反馈，而不是面对纯白屏。
确保打包后资源路径正确
白屏常因 JS/CSS 路径 404 导致应用根本没启动。关键配置在 vite.config.ts：
- 生产环境设
base: './'，避免相对路径解析错误； - 如果部署在子路径（如
https://example.com/my-app/），则设base: '/my-app/'； - 确认
build.outDir和实际部署目录一致，防止静态资源找不到。
适配 file:// 协议与旧浏览器
双击打开 dist/index.html 白屏，多因 ES Module 不被支持或跨域拦截：
立即学习“Java免费学习笔记（深入）”；
- 安装兼容插件：
npm i @vitejs/plugin-legacy -D； - 在
vite.config.ts的plugins中加入legacy()，并指定目标浏览器（如['chrome63', 'edge16']）； - 它会自动生成兼容性 JS，并注入 polyfill，让老浏览器也能执行；
- 若仍需支持双击打开，可配合脚本自动移除
type="module"和nomodule属性（但会牺牲现代特性，慎用）。
避免路由刷新白屏
使用 Vue Router 或 React Router 的 history 模式时，刷新页面返回 404，导致白屏：
- 开发时 Vite 内置支持 —— 配置
server.strict = false或启用server.historyApiFallback； - 上线部署时，Nginx/Apache 需配置 fallback 到
index.html，例如 Nginx 中加：
location / {
try_files $uri $uri/ /index.html;
}
- 这样所有前端路由请求都会返回
index.html，由 JS 路由器接管，不再 404。
