众所周知,vue脚手架搭建的本地项目运行后的访问地址是localhost+端口号或者局域网IP+端口号

Local:   http://localhost:96/
Network: http://192.168.8.129:96/
  • Local 地址只能在当前电脑上访问
  • Network 地址则可以在处在同一个局域网内的任何电脑上访问

那么问题来了,如何在没连WiFi的手机上或者不在同一地方的其他人电脑上访问呢

传统办法就是打包后放到服务器上,这样做效率太低了,哪怕修改一个标点符号都得重新打包,最便捷的解决办法就是使用内网穿透工具。

所谓内网穿透,简单来说就是提供一个域名绑定内网IP和端口来实现外网访问内网。
下面介绍一下如何使用钉钉提供的免费内网穿透工具

1.下载地址:https://github.com/open-dingtalk/pierced.git,下载后解压会出现两个文件

ding.exe
ding.cfg

2.注意不能直接双击运行,在当前目录下打开cmd命令窗口然后输入

start ding.exe -config=ding.cfg -subdomain=zidingyi 96

可以把这段代码保存为一个.bat文件,双击运行即可,不用每次都输入这么一长串。

前面一大段不用理会,关键参数在后面 zidingyi 96

  • zidingyi 代表钉钉提供的外网域名前缀,可自定义
  • 96 代表本地项目的端口,与项目运行后的端口保持一致

3.运行后出现如下窗口则表示内网穿透成功
在这里插入图片描述

  • zidingyi.vaiwan.com 是钉钉提供的外网域名
  • 127.0.0.1:96 是你本地项目的地址

任何人任何地方都通过可以访问这个域名来访问你的本地项目,而且是实时同步的。

有个弊端就是这个域名无法在微信里打开,会提示危险网站,因为两马不相容,你懂的。

Logo

前往低代码交流专区

更多推荐