使用ngrok内网穿透 附vue脚手架以及uniapp教程

ngrok官网：会员登陆

登录之后进入购买隧道

下载启动包Windows · Sunny-Ngrok说明文档

下载之后解压到本地 打开文件 文件夹里面有一个启动工具，双击打开

双击打开后出现终端（window系统）

重点来了！！！！！！！

一、vue脚手架穿透（如果启动内网穿透不会出现打不开的情况可以忽略这里）

1、在vue脚手架中打开vite.config.js(没有就创建) 在devServer下添加disableHostCheck: true，跳过检查

devServer:{
disableHostCheck: true
}

启动后在终端把红色框起来的部分复制并粘贴到终端后面（如果有多个隧道则逗号分割，例如：隧道id1，隧道id2），显示隧道启动成功就可以了访问了

 注：如果在使用中会出现频繁刷新（不是指热更新）就在vite.config.ts文件下的server的hmr添加{protocol: "ws", host: "localhost"}

 server：{
      hmr: { overlay: false, protocol: "ws", host: "localhost"  }
    }

二、uniapp使用内网穿透

打开manifest.json文件，点击源码视图（直接划到最底下）在h5下添加的devServer:{"disableHostCheck" : true}保存后一定一定要重新启动项目 不然不生效！！