前言

本文只是很简单的一个入门使用方法，详细的使用可以查看下面的相关资源中的文档
本文目的：使开发者可以将本地正在开发的项目，直观的展示给他人正常访问

资源

ngrok 官网
ngrok npm 地址

使用方法

  1. 可以在官网下载页面下载您所需要的相应的系统版本程序（不推荐的方式）
  • 下载之后将压缩包解压即可使用了

image.png

  • 打开程序之后直接敲相应的命令行即可

image.png

  1. 可以使用 npm 全局安装使用

参照着上面的ngrok npm 地址里面的使用方法

  • 相关的命令行 ```

    全局安装

    npm install ngrok -g

    当前项目安装

    npm install ngrok

    启动 这个端口号得和你的本地项目起的服务保持一致

    ngrok http 8080
  1. ##Example<br />
  2. ####使用昨天的 jsdoc 的示例文件
  4. > [jsdoc 一个JavaScript API文档生成器](https://www.jianshu.com/p/161495917279)
  7. 1. 启动本地服务

cd Desktop/jsdocDemo/xiaochuan http-server

  2. - 浏览器打开查看是否可以本地正常访问
  4. > ![image.png](https://upload-images.jianshu.io/upload_images/9064013-ed22685cbf0c52bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  7. 2. 之后再打开一个命令行窗口使用 `ngrok`

全局安装

npm install ngrok -g

测试是否全局安装成功，成功之后即可正常使用

ngrok -v

之后就可以将本地起的服务生成一个可以线上访问的地址

ngrok http 8080

  2. - 敲完上面的命令行后，窗口会如下显示
  4. > ![image.png](https://upload-images.jianshu.io/upload_images/9064013-98f6647b875653c0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  7. - 将里面的 Forwaring 后面的地址复制出来即可正常访问啦

http://6954b8d4.ngrok.io https://6954b8d4.ngrok.io

```

  1. 之后是测试时间喽
  • PC 端访问效果

image.png
image.png
image.png

  • 手机端访问效果

472211953781240261.png
686062274544449377.jpg
272313312477592023.jpg

  • 而且在每次访问的时候命令行窗口中也会有相应的访问记录

image.png

更新

  • 问题

我这边使用的是 vue 开发的，如果是 npm run dev 之后，再使用这个 ngrok ，出来的链接打开的话会显示如下图所示
image.png

  • 解决方法

在 npm run build 打包之后的 dist 文件夹中使用 http-server 起服务即可
image.png