VS Code隐藏功能曝光! localhost:3000终于能发给别人打开了
脚本之家
VS Code 隐藏神器曝光！一键把 localhost 分享给全世界！
前端开发的时候，经常遇到一个问题：
自己电脑上的项目跑起来了。
localhost:5173
但是：
- 产品经理打不开
- 远程同事无法预览
- 手机测试不了
- 客户无法访问
以前我们通常会想到：
ngrok
localtunnel
frp
甚至自己搭服务器做端口映射。
但其实，VS Code 早就内置了解决方案。
只需要几步：
你的本地项目，直接变成一个公网链接。
VS Code 自带端口穿透
很多人每天都在用 VS Code 写代码。
但可能不知道，它里面隐藏了一个功能：
Ports（端口）
它可以直接将本地开发服务器暴露出去。
比如你的 Vue / React 项目：
localhost:5173
点击几下，生成一个公网 URL：
https://xxxx-5173.app.github.dev
别人打开链接就可以直接访问你的本地项目。
怎么开启？
非常简单。
第一步
启动你的项目：
npm run dev
例如：
localhost:5173
第二步
打开 VS Code：
Terminal ↓ Ports
进入端口管理面板。
点击：
Forward a Port
第三步
输入你的本地端口：
例如：
5173
VS Code 会自动创建映射。
第一次使用会提示使用 Github 登录：
直接允许就可以了。
第四步
右键端口，选择：
Make Public
会提示：你即将创建公开转发的端口。Internet 上的任何人都可以连接到侦听端口 5173 的服务。仅当此服务安全且不敏感时，才应继续操作。
点击继续即可！
然后复制生成的 URL。
别人打开，就能访问你的本地页面。
它适合哪些场景？
1. 快速给别人看 Demo
以前：
“你安装一下环境，然后
npm install，再启动一下……”
现在：直接发链接。
2. 手机测试网页
比如开发移动端 H5：
以前需要：
- 查本机 IP
- 配局域网
- 处理防火墙
现在：
手机直接访问 VS Code 生成的地址。
3. 给客户预览效果
开发中的后台系统：
不用部署服务器。
开发完成前：
直接让客户体验。
总结
以前分享 localhost 需要：
ngrok + 配置 + 启动隧道
现在打开 VS Code：
Forward Port→Make Public→ 复制链接
一个隐藏功能，让你的本地开发环境瞬间拥有公网访问能力。
对于前端开发来说：这绝对是 VS Code 里值得收藏的小技巧。