宣告：

本教程學習自b站UP主“遇見狂神說”的視訊

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，如下圖：