options has an unknown property ‘overlay‘.

错误描述

报错： ERROR  ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API s
chema.
         - options has an unknown property 'overlay'. These properties are valid:
           object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, h
ttps?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?,
setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

问题原因

vue2升级vue3，在使用vue-cli5，编写vue.config.js时，会遇到此问题。找不到overlay属性。实际上是属性的使用方法变了。
可以找到node_modules\webpack-dev-server\lib\Server.js)文件查看源码

        if (typeof client.overlay !== "undefined") {
          searchParams.set(
            "overlay",
            typeof client.overlay === "boolean"
              ? String(client.overlay)
              : JSON.stringify(client.overlay)
          );
        }

解决办法

将源代码：

  devServer: {
	......
    overlay: {
      warnings: false,
      errors: true
    }
  }

修改为：

  devServer: {
  ......
    client: {
      overlay: {
        warnings: false,
        errors: true
      }
    },
  }