ngrok实现内网穿透window下，vue项目invalid host header报错_vue项目内网穿透

目的：使自己的本地的vue项目可以在外网上访问。
本地访问：http://localhost:8080/
外网访问：通过ngrok生成一个链接，这个链接在其他网络环境下都可以访问。

windows下安装
1.注册并下载ngrok，注册的时候需要验证码，有时候登不上去，用到了外网。（我用的是猎豹加速器，可以每天登录签到，有一个小时的使用时长）

2.解压并运行exe文件

3.登录到ngrok中获取专属密钥
 

4.执行上面的命令，会自动创建一个配置文件ngrok.yml。
5.输入下面的命令，即将本地端口8080映射到外网中，如果需要映射其他端口，只需将8080改成相对应的端口即可。

ngrok http 8080

6.输入上面的网址就可以运行项目了。
参考的ngrok文章

问题：访问vue项目，页面问题
内网穿透访问Vue项目的时候，页面出现Invalid Host header
常规做法：
//在 vue.config.js文件中添加
module.exports = {
devServer: {
disableHostCheck: true
}
}

运行项目时报错，显示没有disableHostCheck这个属性

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?, onListeni
ng?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

解决方法：
这个属性应该是被弃用了，需要换一种写法。方案链接。
将 disableHostCheck:true
替换为
historyApiFallback: true,
allowedHosts: “all”,

重新配置vue.config.js

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

最后重新启动项目 npm run serve
打开链接，显示出项目