教程简介本文手把手教大家通过ngrok实现本地 html页面内网穿透无需服务器即可实现外网访问、全程零基础可上手适配 Windows/Mac 系统。✨ ngrok 核心优势轻量无复杂配置、支持HTTPS公网域名、自带请求日志监控、适配各类本地服务穿透是开发者本地调试、临时公网服务部署的神器。第一步注册 ngrok 账号ngrok 穿透服务需要绑定账号认证否则无法正常使用完整穿透能力1. 打开浏览器访问 ngrok 官方主页ngrok: deliver your apps, APIs, and AI on local and prod2. 点击页面右上角Sign up注册账号支持 GitHub、Google 快捷登录无需繁琐邮箱验证3. 完成注册后自动登录个人后台仪表盘第二步下载并安装 ngrok推荐官方渠道下载适配电脑系统保证安装包安全无冗余1. 登录账号后进入官方下载页面Download ngrok for macOS | ngrok2. 页面会自动识别当前电脑系统Mac/Windows/Linux选择对应版本下载Mac 快捷安装方式推荐终端执行 Homebrew 命令一键安装​​brew install ngrok第三步配置专属认证 Token核心步骤安装完成后必须配置 Authtoken 绑定个人账号否则穿透服务会受限、频繁断线1. 进入 ngrok 个人仪表盘ngrok Log in — Manage Tunnels, Domains API Gateways2. 在页面找到Your Authtoken模块复制专属令牌字符串3. 打开电脑终端执行以下配置命令替换为自己的 Tokenngrok config add-authtoken 你的token第四步VS Code 安装 Live Server启动本地 HTML1. 安装插件打开 VS Code左侧扩展图标搜索插件Live ServerRitwick Dey 开发下载量最高那款点击安装安装完成重启 VS Code2. 编写测试 index.html新建文件夹里面创建index.html复制下面测试代码3. VS Code 一键启动本地网页VS Code 打开上面存放 index.html 的文件夹右键点击index.html选择Open with Live Server自动弹出浏览器页面地址默认http://127.0.0.1:5500重点Live Server 默认端口是 5500记住这个端口后面 ngrok 穿透要用。 不要关闭 VS Code关闭插件服务就会停止。第五步ngrok 穿透 5500 端口生成公网地址新开独立终端窗口windr 输入cmd然后回车VS Code 和 Live Server 保持运行不能关执行穿透命令端口填 Live Server 默认 5500ngrok http 5500启动成功输出示例关键信息说明Forwarding后的https://xxxx.ngrok.io 公网访问地址手机 / 外网电脑都能打开Web Interface: http://127.0.0.1:4040ngrok 本地请求监控面板Session Status online代表穿透正常在线第七步ngrok 管理面板调试浏览器访问http://127.0.0.1:4040功能Inspector记录所有外网访问请求、请求头、静态资源加载日志Replay一键重放访问请求调试页面资源 404、样式加载异常流量统计方便排查前端资源路径错误教程总结整套流程零 Python、无后端纯前端友好方案VS Code 安装 Live Server 插件一键启动本地静态网页端口 5500ngrok 绑定账号 Token穿透 5500 端口获取公网 HTTPS 地址外网、手机直接访问本地页面可以直接发送链接给好友看到运行结果