Vue 项目 invalid host header 问题 配置 disableHostCheck:true报错

项目场景：
解决 Vue 项目 invalid host header 问题disableHostCheck:true报错

问题描述
使用内网穿透时出现 invalid host header
找了好多都是让
配置vue.config.js
系统报错
// vue3 vue.config.js
module.exports = {
// 跳过检查host
devServer: { disableHostCheck: true }
}

按照上述进行配置时出现报错信息

 

 

原因分析：
根据报错提示
在webpack 5 中disableHostCheck应该被遗弃了
查看文档了解到需将 disableHostCheck:true
替换为
historyApiFallback: true,
allowedHosts: “all”,

解决方案：
重新配置vue.config.js

devServer: {
historyApiFallback: true,
allowedHosts: “all”,
}