Vue.config.js配置报错ValidationError: Invalid options object解决办法

 更新时间:2024年02月04日 10:01:55   作者:鸡汤辉  
这篇文章主要给大家介绍了关于Vue.config.js配置报错ValidationError: Invalid options object的解决办法,主要由于vue.config.js配置文件错误导致的,文中通过代码介绍的非常详细,需要的朋友可以参考下

接手了别人的项目,在配置 devServer 时直接照搬了之前的配置结果报错

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

 ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

这段报错信息意思是Dev Server已使用与API模式不匹配的选项对象初始化,其中明确指出是属性 ‘disableHostCheck’,于是我屏蔽了这个属性,发现能启动成功

此时我查看了之前和这次的项目的webpack的版本发现这次的版本是 webpack5 之前是webpack4,并且查看了webpack的文档发现

‘disableHostCheck’ 这个属性在webpack4中已经被删除替换,webpack5中已经不存在这个属性了,所以配置这个会报错,正确做法是替换成

devServer: {
    historyApiFallback: true,
    allowedHosts: "all"
  },

OK!

附:options has an unknown property 'overlay'.解决

解决方法:

module.exports={
  devServer:{
    //...
    hot: true,
    port: devPort,
    open: true,
    client: {
      overlay: {
        warnings: true,
        errors: true,
      },
    },
  }
}

总结

到此这篇关于Vue.config.js配置报错ValidationError: Invalid options object解决的文章就介绍到这了,更多相关ValidationError: Invalid options object内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue.js标签页组件使用方法详解

    Vue.js标签页组件使用方法详解

    这篇文章主要为大家详细介绍了Vue.js标签页组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一
    2019-10-10
  • element-ui 本地化使用教程详解

    element-ui 本地化使用教程详解

    这篇文章主要介绍了element-ui 本地化使用教程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Vue中常用的rules校验规则的实现

    Vue中常用的rules校验规则的实现

    在vue开发中,难免遇到各种表单校验,本文主要介绍了Vue中常用的rules校验规则的实现,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10
  • vue学习笔记之过滤器的基本使用方法实例分析

    vue学习笔记之过滤器的基本使用方法实例分析

    这篇文章主要介绍了vue学习笔记之过滤器的基本使用方法,结合实例形式分析了vue.js过滤器的基本功能、用法与操作注意事项,需要的朋友可以参考下
    2020-02-02
  • 详解Vue3子组件向父组件传递消息

    详解Vue3子组件向父组件传递消息

    这篇文章主要介绍了Vue3子组件向父组件传递消息,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • VueX浏览器刷新如何实现保存数据

    VueX浏览器刷新如何实现保存数据

    这篇文章主要介绍了VueX浏览器刷新如何实现保存数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue项目中定义全局变量的几种常用方法总结

    Vue项目中定义全局变量的几种常用方法总结

    在项目中经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量,这篇文章主要给大家介绍了关于Vue项目中定义全局变量的几种常用方法的相关资料,需要的朋友可以参考下
    2023-12-12
  • vue实现验证码按钮倒计时功能

    vue实现验证码按钮倒计时功能

    最近项目结束,空闲时间比较多,今天小编抽时间给大家使用vue写一个小例子,就决定做验证码倒计时功能,具体实例代码大家参考下本文
    2018-04-04
  • vue如何封装Axios的get、post请求

    vue如何封装Axios的get、post请求

    这篇文章主要介绍了vue如何封装Axios的get、post请求,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue无后端配合实现导出功能的示例代码

    Vue无后端配合实现导出功能的示例代码

    这篇文章主要为大家详细介绍了Vue如何在无后端配合的情况下实现导出功能,文中的示例代码简洁易懂,有需要的小伙伴可以跟随小编一起了解一下
    2024-01-01

最新评论