vite 本身不提供运行时错误弹窗，需在应用层用 window.onerror 和 unhandledrejection 事件捕获错误，并通过原生 dom 或框架方案（vue/react）实现自定义弹窗提示，注意区分开发红屏与运行时错误。

在 Vite 项目中，Vite 本身不提供运行时错误弹窗功能（它只负责开发服务器和构建），但你可以结合前端框架（如 Vue、React）或纯 JavaScript，在 应用层捕获错误并显示自定义弹窗。关键在于区分两类错误：开发阶段的 Vite 报错（终端/浏览器控制台）和运行时 JS 错误（需手动监听处理）。

捕获全局 JavaScript 运行时错误

使用 window.onerror 和 window.addEventListener('error') 捕获未处理的脚本错误、资源加载失败等：

• window.onerror 可获取错误消息、文件名、行号、列号和错误对象
• unhandledrejection 事件用于捕获 Promise 拒绝且未被 .catch() 处理的情况
• 注意：部分跨域脚本错误会受限（显示为 Script error.），可通过 <script crossorigin></script> 和服务端配置 CORS 解决

封装一个轻量弹窗组件（纯 JS 示例）

无需依赖 UI 库，用原生 DOM 实现一个可复用的错误提示弹窗：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

function showErrorDialog(message, details = '') {
  // 避免重复创建
  if (document.getElementById('error-dialog')) return;

  const dialog = document.createElement('div');
  dialog.id = 'error-dialog';
  dialog.style.cssText = `
    position: fixed; top: 20px; right: 20px; max-width: 400px;
    background: #fff; border: 1px solid #e0e0e0; border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  `;

  dialog.innerHTML = `
    <div style="padding: 16px;">
      <div style="font-weight: 600; color: #d32f2f; margin-bottom: 8px;">⚠️ 运行出错</div>
      <div style="font-size: 14px; color: #333; white-space: pre-wrap;">${message}</div>
      ${details ? `<pre class="brush:php;toolbar:false;" style="margin-top: 12px; padding: 8px; background: #f5f5f5; border-radius: 4px; font-size: 12px; overflow-x: auto;">${details}

` : ''} 关闭