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

具体报错如下：

 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.
 - 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? }
    at validate (E:\Projects\VSCode\eribbit-client-pc\node_modules\webpack-dev-server\node_modules\schema-utils\dist\validate.js:115:11)
    at new Server (E:\Projects\VSCode\eribbit-client-pc\node_modules\webpack-dev-server\lib\Server.js:231:5)
    at serve (E:\Projects\VSCode\eribbit-client-pc\node_modules\@vue\cli-service\lib\commands\serve.js:194:20)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

问题解析：

其实报这种问题，基本就是webpack版本的问题，因为在vue再更新版的时候，内在集成的webpack版本也一直再变，真是麻了。

也就是 vue.config.js 文件内容你配置错了!!!

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

翻译如下：

ValidationError:选项对象无效。已使用与API架构不匹配的选项对象初始化开发服务器。

解决方案：

　　我看百度其他人回答，删除报错属性之类的，太不负责了，就是要用这个属性，居然还让我删除，这哪是解决问题啊！

具体解决如下：

注意报错信息的提示，它其实已经说了  未知的属性： disableHostCheck

options has an unknown property 'disableHostCheck'. 

翻译：

选项具有未知属性“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? }

如果你不知道你要修改的属性在 webpack-dev-server@4.0.0 中改变成了什么。可以查看：迁移文档

进入文档，你可以直接搜你要查的属性即可。我的查询如下：

• The disableHostCheck option was removed in favor allowedHosts: 'all': （ 翻译：已删除 disableHostCheck 选项 以支持 allowedHosts:“all” ）

v3:

module.exports = {
  devServer: {
    disableHostCheck: true,
  },
};

 

v4:

module.exports = {
  devServer: {
    allowedHosts: "all",
  },
};

 

因此，我的 vue.config.js 修改如下:

/*
 *                        .::::.
 *                      .::::::::.
 *                     :::::::::::
 *                  ..:::::::::::'
 *               '::::::::::::'
 *                 .::::::::::
 *            '::::::::::::::..
 *                 ..::::::::::::.
 *               ``::::::::::::::::
 *                ::::``:::::::::'        .:::.
 *               ::::'   ':::::'       .::::::::.
 *             .::::'      ::::     .:::::::'::::.
 *            .:::'       :::::  .:::::::::' ':::::.
 *           .::'        :::::.:::::::::'      ':::::.
 *          .::'         ::::::::::::::'         ``::::.
 *      ...:::           ::::::::::::'              ``::.
 *     ````':.          ':::::::::'                  ::::..
 *                        '.:::::'                    ':'````..
 *
 * @Author: byx
 * @Date: 2022-08-02 21:15:35
 * @LastEditors: byx
 * @LastEditTime: 2022-10-10 21:48:16
 * @version: 1.0
 * @Descripttion: wwww.byx1024.top
 */
const { defineConfig } = require('@vue/cli-service')
const path = require('path')

module.exports = defineConfig({
  devServer: {
    port: 8080,
    host: 'localhost',
    https: false,
    open: true,
    allowedHosts: 'all'
  },
  transpileDependencies: true,
// 其他webpack配置
  chainWebpack: (config) => {
    // 这个是给 webpack-dev-server开启可IP和域名访问权限。（已弃用，已写入DevServer中）
    // config.devServer.disableHostCheck(true)
  }
})

 完毕！

番外：

最后，我还有个问题，一直没找到相关文档，我想在  vue.config.js 中 通过 chainWebpack 调整内联文件的大小限制（想让程序把图片10kb之内的直接打包）

查看文档都说这样写，但是运行一直报错，也一直找不到解决方案，希望来个大神，可以帮忙答疑。

vue.config.js  配置代码如下：

module.exports = defineConfig({
  devServer: {
    port: 8080,
    host: 'localhost',
    https: false,
    open: true,
    allowedHosts: 'all'
  },
  transpileDependencies: true,// 其他webpack配置
  // 通过chainWebpack 调整内联文件的大小限制
  chainWebpack: (config) => {
    // `url-loader`是webpack默认已经配置的，现在我们来修改它的参数
    // 图片加载 limit是10000字节，就是让10kb之内
    // cmd 中运行：vue inspect --rule images 或 --rules可查看，配置，然后通过.tap方式，修改插件或规则中的内容

    // config.module
    //   .rule('images')
    //   .use('url-loader')
    //   .loader('url-loader')
    //   .tap((options) => Object.assign(options, { limit: 10000 }))
  }
})

 报错信息如下：

　　说是：无法将未定义或null转换为对象

TypeError: Cannot convert undefined or null to object
    at Function.assign (<anonymous>)
    at E:\Projects\VSCode\vue-pc\vue.config.js:77:32

 

 我运行：vue inspect --rule images 查看配置，空空的啥也没有，我就直接配置上了内容也不行。麻了。

  // 通过chainWebpack 调整内联文件的大小限制
  chainWebpack: (config) => {
    // `url-loader`是webpack默认已经配置的，现在我们来修改它的参数
    // 图片加载 limit是10000字节，就是让10kb之内
    // cmd 中运行：vue inspect --rule images 或 --rules可查看，配置，然后通过.tap方式，修改插件或规则中的内容
     config.module.rule('images').use('url-loader').loader('url-loader').options({
       name: './assets/images/[name].[ext]',
       quality: 85,
       limit: 0,
       esModule: false
     })
    // config.module
    //   .rule('images')
    //   .use('url-loader')
    //   .loader('url-loader')
    //   .tap((options) => Object.assign(options, { limit: 10000 }))
  }

 

暂挂博客，等以后解决了，在来记录。

 

文中涉及到的文档相关链接：

webpack-dev-server@4.0.0 的迁移指南：webpack-dev-server@4.0.0