乐趣区

如何在手机端查看PC端上的Vue项目二外网环境

在《如何在手机端查看 PC 端上的 Vue 项目 (一)》这篇文章中介绍了如何在同一网络下通过配置 Vue 项目的host 实现在手机端查看 Vue 项目,但是这种方法毕竟有局限性,如果是台式机就不行了,所以今天介绍一下如何实现手机通过外网也能访问 PC 端的 Vue 项目
准备工作:
如何在手机端查看 PC 端上的 Vue 项目 (一) 介绍了如何查看本机 IP 及配置 Vue 文件
花生壳官网 注册账号、下载客户端
草料二维码官网 用于将网址转为二维码

1、查看本机 IP、修改 Vue 项目中的配置

上面的参考文章中已经介绍了如何查看本机 IP 并配置 Vue 文件,这里就不在赘述

2、注册花生壳、设置内网映射

2.1、点击上方花生壳官网链接,并注册账号,下载客户端

2.2、客户端登录后打开如下图所示,点击右下角加号

2.3、选择内网映射

2.4 填写配置信息,最后点击保存

应用名称 :随意
应用类型 :因为我们一般都是访问的网页,所以选择HTTP80, 你也卡哇伊选择 通用
外网域名 :这是你注册账号后,花生壳免费给你的,因为免费,所以看起来比较乱,想要好记的,你懂,money~~~~
往外端口 :不用设置,也没法设置,默认 80
内网主机 :就是你电脑的 IP, 同时你 Vue 中配置的host 也得是这个
内网端口:就是你 Vue 中配置的port, 记得别和其他端口号冲突

退出移动版