问题来源

在进行vue2项目打包上线时需要更改vue.config.js文件。

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: '0.0.0.0', // 允许外部访问
    port: 7000,       // 使用端口7000
    disableHostCheck: true, // 禁用主机检查，允许外部访问
  }
});

解决方法

报错信息：

ERROR  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 

翻译：

无效的选项对象。使用与API模式不匹配的选项对象初始化了Dev Server。
-选项有一个未知属性'disableHostCheck'。这些属性是有效的:
对象{allowedHosts?,你好吗?,客户端?,压缩?, devMiddleware ?,头?, historyApiFallback ?、主机吗?,热吗?, http2 ?, https ?, ipc ?, liveReload ?, magicHtml ?, onAfterSetupMiddleware ?, onBeforeSetupMiddleware ?, onListening ?、开放的吗?、港口吗?、代理吗?,服务器?, setupExitSignals ?, setupMiddlewares ?、静态?, watchFiles ?, webSocketServer ?｝
ValidationError:无效选项对象。使用与API模式不匹配的选项对象初始化了Dev Server。
-选项有一个未知属性'disableHostCheck'。这些属性是有效的:
对象{allowedHosts?,你好吗?,客户端?,压缩?, devMiddleware ?,头?, historyApiFallback ?、主机吗?,热吗?, http2 ?, https ?, ipc ?, liveReload ?, magicHtml ?, onAfterSetupMiddleware ?, onBeforeSetupMiddleware ?, onListening ?、开放的吗?、港口吗?、代理吗?,服务器?, setupExitSignals ?, setupMiddlewares ?、静态?, watchFiles ?, webSocketServer ?｝

根据报错信息我们可以得知：webpack-dev-server的API已经更新禁用主机检查的disableHostCheck。所以无法使用，并为我们提供了allowedHosts等选项。

下面是进行修改后的代码：

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: '0.0.0.0',
    port: 7000,
    allowedHosts: 'all', // 允许所有主机访问
  }
});

修改后正常运行。