如何让你的本地程序可以在其他电脑或者手机上联网访问

ngrok使用：

ngrok官网：http://www.ngrok.cc

首先里面有免费的隧道，虽然速度有点慢，但是咱们白嫖党不讲究，只要能用就行

首先把你的项目在本地跑起来，确定在电脑浏览器上可以访问，记录访问时的ip和port，等会配置完成之后就可以通过互联网直接访问了

进入ngrok官网之后，如果没有注册的先去注册网站账户，注册之后点击登陆，登陆之后的页面如下：

然后点击左侧栏目中的隧道管理——》开通隧道，之后在右边把页面滑动到最下方，找到“美国Ngrok免费服务器 原价¥0.00 折扣价¥0”，点击立即购买，如下图：

按照下图提示进行设置：

点击隧道管理——》隧道管理，然后点击客户端下载，选择适合你电脑的软件版本：

解压之后进入解压文件夹中，双击Sunny-Ngrok启动工具.bat，然后先去复制隧道id，如下图：

记住隧道id很重要，不能泄露给别人，之后把隧道id粘贴到通过Sunny-Ngrok启动工具.bat打开的窗口中，点击Enter，如下图：

配置完成之后页面如下图：

请注意上面的：http://mingming.free.idcfengye.com -> 127.0.0.1:8080，这代表我们在网络上可以直接通过http://mingming.free.idcfengye.com来代替127.0.0.1:8080，如果在本地访问的时候你用的是127.0.0.1:8080/home，那在网络上可以通过http://mingming.free.idcfengye.com/home来访问网页，以此类推即可

现在来测试一下吧！

直接访问本地项目如下图：

通过手机百度访问在电脑上跑起来的项目，如下图：

你当然也可以在电脑浏览器上访问，这都是一样的，但是需要注意的是通过互联网访问项目的时候项目不能关闭，否则就无法访问了

你的项目以后可能还会部署到linux上面，总之当你的项目以后可能改变ip和端口，以及改变访问协议的时候，你都需要改变隧道配置，那你需要点击隧道管理——》隧道管理——》编辑，如下图：

之后又可以愉快的在互联网上访问你的本地项目了

访问vue项目出现的问题：

如果访问的是vue项目，你通过互联网访问的时候网页上可能出现“invalid host header”，

出错原因：新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不在配置内，将会中断访问

解决办法：1、如果在脚本架2，可以直接devServer中配置：disableHostCheck: true，如下图：

2、如果是脚手架3，你需要在vue.config.js中配置disableHostCheck: true，如下图：