Vue.config.js 配置报错 ValidationError: Invalid options object.

最新推荐文章于 2024-04-01 15:22:14 发布
最新推荐文章于 2024-04-01 15:22:14 发布
阅读量2.3w 收藏 20
点赞数 32
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c327127960/article/details/128799614
版权

接手了别人的项目，在配置 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！

鸡汤辉
关注
  • 32
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
ValidationError: Invalid options object.报错
hhy15036496810的博客
02-21 6902
运行项目npm run serve 报错 ValidationError: Invalid options object.
如何配置vue.config.js 处理static文件夹下的静态文件
10-15
主要介绍了如何配置vue.config.js 处理static文件夹下的静态文件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elmentui 项目在启动时： ValidationError: Invalid options object...报错
最新发布
wyqshusan的博客
04-01 349
elmentui 项目在启动时，执行npm run serve之后报： ValidationError: Invalid options object…报错。
[webpack-cli] Invalid options object错误-webpack-dev-server在项目根目录的终端启动报错Invalid options object
angrynouse的博客
06-17 1612
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
01-21
1.在vue项目根目录下新建vue.config.js（不是在src下面） vue.config.js配置文件： module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler? // https://vuejs.org/v2/guide/installation.html#Runtim
validation-api-2.0.1.Final-API文档-中英对照版.zip
04-19
赠送jar包：validation-api-2.0.1.Final.jar； 赠送原API文档：validation-api-2.0.1.Final-javadoc.jar； 赠送源代码：validation-api-2.0.1.Final-sources.jar； 赠送Maven依赖信息文件：validation-api-2.0.1.Final.pom； 包含翻译后的API文档：validation-api-2.0.1.Final-javadoc-API文档-中文(简体)-英语-对照版.zip； Maven坐标：javax.validation:validation-api:2.0.1.Final； 标签：javax、api、validation、jar包、java、API文档、中英对照版； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。 双语对照，边学技术、边学英语。
idea测试mysql连接报错：Server returns invalid timezone. Go to ‘Advanced’ tab and set ‘serverTimezon’
01-20
原因：时区错误，MySQL默认的时区为UTC时区，相比比北京时间晚8个小时。 解决办法： CMD下进入MYSQL的命令 输入： mysql -h localhost -u root -p 回车，然后输入密码再回车，进入MySQL命令 然后输入： set global time_zone=’+8:00’; 设置完成后，输入： select now(); 显示当前时间正确，证明设置成功，再次连接mysql，成功。 作者：P_Doraemon
ValidationError: Invalid options object. Dev Server has been initialized using an options object th
热门推荐
mmwf__的博客
08-24 2万+
ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
webpack配置报错Invalid options object. Dev Server has been initialized using an options object that...
m0_46165586的博客
08-21 3167
disableHostCheck是一个用于Vue CLI开发服务器的配置选项，用于禁用对主机检查的验证。在旧版本的Vue CLI中，可以使用这个选项来解决某些特定的网络环境下的配置问题。 然而，在较新的Vue CLI版本（4.x及以上）中，disableHostCheck选项被移除了，并且默认情况下主机检查是启用的。这是因为启用主机检查可以提高开发服务器的安全性，防止潜在的主机劫持攻击。
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that d
m0_61582755的博客
02-18 2840
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
Invalid options object. Dev Server has been initialized using an options object that does not match
weixin_53331942的博客
11-03 1万+
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.详细解决方案 (一)问题描述 今天运行项目时，报了一个非常 **的错误 上网查了一下，找到了这个文章 点击这里 （二）解决问题 于是在自己的项目中找到了如下的文件 将圈化的地方全部注释，再次 npm run dev 运行，发现OK了！ ...
validation-api-1.1.0.Final-API文档-中文版.zip
04-08
赠送jar包：validation-api-1.1.0.Final.jar； 赠送原API文档：validation-api-1.1.0.Final-javadoc.jar； 赠送源代码：validation-api-1.1.0.Final-sources.jar； 包含翻译后的API文档：validation-api-1.1.0.Final-javadoc-API文档-中文(简体)版.zip 对应Maven信息：groupId：javax.validation，artifactId：validation-api，version：1.1.0.Final 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。
解决vue.js 数据渲染成功仍报错的问题
12-09
最近在做一个vue项目，用的是官方推荐的axios请求数据，数据结构是一级对象嵌套二级对象，发现一级对象数据渲染不报错，二级数据渲染报错。很是郁闷！data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下： { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级对象.所以会报错； 解决办法是： export default { name: 'de
vue.config.js中配置Vue的路径别名的方法
10-15
主要介绍了vue.config.js中配置Vue的路径别名的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解如何配置vue-cli3.0的vue.config.js
12-02
本文介绍了如何配置vue-cli3.0的vue.config.js，分享给大家，具体如下： vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构，3 的设计更加抽象和简洁（此处后续可以详细介绍） vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck
vue - vue.config.js中devServer配置方式
10-16
今天小编就为大家分享一篇vue - vue.config.js中devServer配置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.config.js完整配置-超详细
05-26
vue.config.js配置 内容概要：vue.config.js完整配置-超详细 适合人群：工作1-3年的前端人员
webpack打包错误：webpack-cli configuration.output has an unknown property ‘mode‘
逝水经年的博客
05-07 2233
一、错误 错误内容 [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.output has an unknown property 'mode'. These properties are valid: object { assetModuleF
vue.config.js 报错 SyntaxError: Cannot use import statement outside a module
09-27
### 回答1： 这个错误通常是因为你的Vue项目中使用了ES6的模块语法，但是Node.js版本较低不支持该语法。解决方案如下： 1. 升级Node.js版本 升级Node.js版本到8.5.0及以上版本，可以支持ES6的模块语法。 2. 使用babel转换 在项目中使用babel转换ES6的模块语法，具体步骤如下： - 安装babel相关的依赖： ``` npm install --save-dev @babel/core @babel/cli @babel/preset-env ``` - 在项目根目录下新建babel.config.js文件，添加以下内容： ``` module.exports = { presets: [ '@babel/preset-env' ] } ``` - 在package.json文件中添加如下命令： ``` "scripts": { "build": "babel src -d lib" } ``` - 运行以下命令进行转换： ``` npm run build ``` 3. 修改代码 如果是在Vue项目中出现该错误，可以将相关的import语句改为require语句，例如： ``` // import import Vue from 'vue' // 替换为 const Vue = require('vue') ``` 希望以上任一方法可以帮助到你解决问题。 ### 回答2： 该报错是因为在vue.config.js文件中使用了import语句，而import语句只能在模块中使用，不能在普通的脚本文件中使用。 在vue.config.js文件中，我们可以使用CommonJS的module.exports来导出一个对象，该对象包含了webpack的配置选项。 如果你需要在vue.config.js中使用import语句来引入模块，你需要将该文件转换为一个模块，可以通过安装babel和相应的插件来实现。 首先，在项目根目录下创建一个.babelrc文件，并配置以下内容： { "presets": ["@babel/preset-env"] } 然后，安装相关的依赖包： npm install -D @babel/core @babel/preset-env babel-loader 接下来，在vue.config.js文件的开头导入转换器： require('@babel/register'); 然后，你就可以在vue.config.js中使用import语句，引入需要的模块。 请注意，使用import语句需要使用babel进行转换，因此在使用import语句之前，需要确保项目中已经安装了相应的依赖包，并正确配置了相关的转换器。 ### 回答3： 这个错误是因为在 vue.config.js 文件中使用了 import 语句，而 import 语句只能在模块中使用。 vue.config.js 文件是一个普通的 JavaScript 文件，不是一个模块，所以不能使用 import 语句。import 语句用于引入其他 JavaScript 模块中的内容。 要解决这个问题，可以使用 require 语句代替 import 语句。 例如，如果想引入一个名为 axios 的模块，可以将 import axios from 'axios' 语句替换为 const axios = require('axios')。 以下是一个示例的 vue.config.js 文件，其中使用了 require 语句引入了 axios 模块： ```javascript const webpack = require('webpack') const axios = require('axios') module.exports = { // 其他配置项 configureWebpack: { plugins: [ // 其他插件 new webpack.ProvidePlugin({ axios: 'axios' }) ] } } ``` 这样就可以解决 SyntaxError: Cannot use import statement outside a module 错误了。同时，要确保安装了需要引入的模块，可以通过 npm install axios 命令安装 axios 模块。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值