ngrok实现公网访问本地

1. ngrok下载和配置

1.1 下载

下载地址

1.2 密钥

首先获取密钥,

然后打开下载的ngrok.exe,输入命令ngrok authtoken your-token

1.3 启动

输入命令ngrok http your-port就可以了

这样可以访问本地的项目了，但是如果接口也是本地的那就需要再代理后端的端口。ngrok免费版只支持代理一个端口，所以我们可以用sunny-ngrok代理后端的端口。
如果打开页面后报错invalid host header，那么需要在vue.config.js文件中设置disableHostCheck

devServer: {
    disableHostCheck: true
}

注：每次重新启动之后，代理地址都会发生变化，只有付费用户才可以固定代理地址。

2. sunny-ngrok下载和配置

2.1 下载

首先注册，注册地址
然后选择菜单隧道管理-》开通隧道-》可以选择最下面免费的，然后填写信息

注意，本地端口要填写代理的后端端口。 然后在隧道管理菜单中下载客户端。

2.2 启动

在sunny-ngrok的下载目录打开cmd,输入命令sunny clientid your-clientid,然后修改接口地址，判断一下如果是通过ngrok访问的就使用sunny-ngrok的地址，否则使用原来的地址。
注：官网教程