如何隐藏ESlint/webpack的HMR错误浮层弹窗

完全可以实现，你遇到的全屏报错遮罩是Nuxt开发模式自带的错误覆盖层，关闭该功能后ESLint报错仍会正常打印到运行npm run dev的终端中，不会再遮挡浏览器页面。

Nuxt 3 配置方法 #

修改项目根目录下的nuxt.config.ts（或nuxt.config.js），新增如下配置：

export default defineNuxtConfig({
  devtools: {
    // 关闭全局错误覆盖层
    overlay: false
  },
  // 若你使用@nuxtjs/eslint-module集成ESLint，补充以下配置
  eslint: {
    // 存在ESLint报错时仍允许正常构建
    failOnError: false
  }
})

Nuxt 2 配置方法 #

修改项目根目录下的nuxt.config.js，新增如下配置：

export default {
  build: {
    hotMiddleware: {
      client: {
        // 关闭webpack热更新的错误覆盖层
        overlay: false
      }
    }
  },
  // 若你使用@nuxtjs/eslint-module集成ESLint，补充以下配置
  eslint: {
    failOnError: false
  }
}

配置修改完成后，重启npm run dev服务即可生效。

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