使用Vite开发服务器处理错误：自定义错误模态框诉求

Vite提供了配置项和API来控制默认的错误弹窗，你可以完全禁用它并实现自定义的错误展示方案：

1. 禁用默认错误Overlay #

在Vite配置文件中设置server.overlay为false，即可关闭默认的错误弹窗：

// vite.config.js
export default {
  server: {
    overlay: false
  }
}

如果你需要更精细的控制（比如只禁用编译错误或保留警告弹窗），也可以传入对象配置：

server: {
  overlay: {
    errors: false, // 禁用编译错误弹窗
    warnings: true // 保留警告弹窗
  }
}

2. 监听Vite错误事件实现自定义展示 #

通过import.meta.hot监听vite:error事件，捕获Vite抛出的错误信息，然后渲染你自己的错误模态框：

// 项目入口文件（如main.js/ts）
if (import.meta.hot) {
  import.meta.hot.on('vite:error', (error) => {
    // 这里编写你的自定义错误展示逻辑
    // 示例：创建自定义弹窗显示错误信息
    const modal = document.createElement('div');
    modal.style.cssText = `
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 16px;
      background: #dc2626;
      color: white;
      border-radius: 4px;
      z-index: 9999;
      max-width: 300px;
    `;
    modal.innerHTML = `
      <h3>自定义错误提示</h3>
      <p>${error.message}</p>
      <button onclick="this.parentElement.remove()">关闭</button>
    `;
    document.body.appendChild(modal);
  });
}

额外说明 #

如果需要更底层的错误控制，还可以通过Vite插件的钩子（比如handleHotUpdate、transform等）拦截错误信息，实现更复杂的自定义逻辑。

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