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

目的：使自己的本地的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这个属性

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

重新配置vue.config.js

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

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