众所周知,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
是你本地项目的地址
任何人任何地方都通过可以访问这个域名来访问你的本地项目,而且是实时同步的。
有个弊端就是这个域名无法在微信里打开,会提示危险网站,因为两马不相容,你懂的。