vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

Uncaught runtime errors:
×
ERROR
Unknown promise rejection reason
    at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:296:58)
    at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:319:7)

原因：
当出现编译错误或警告时，在浏览器中显示全屏覆盖。
解决方法：
在vue.config.js中添加如下配置，重启项目即可

module.exports = defineConfig({
  devServer: {
    client: {
      overlay: false,
    },
  }

})

带着疑问我去查了webpcak中文文档最终发现原因所在

当你页面出现警告信息的时候 会出现警告 然后页面以为是错误 所以红色报错覆盖页面