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 里值得收藏的小技巧。
相关文章
VS Code 又憋了个大的，官宣全新 AI 版 UI：结果被网友无情吐槽了，自 vscode 诞生以来，微软几乎很少为其做过什么 ui 上的优化，下面我们就来看看具体变化2026-08-12首个版本v1.111已上线! VS Code开启周更狂飙模式
026年3月10日，微软宣布将Visual Studio Code（VS Code）更新节奏从月更提速至周更，并发布首个周更版本v1.1112026-03-11- 还在手动打开浏览器、点击按钮、检查控制台报错？太累了！现在，最新的VS Code 1.110中AI可以直接调试浏览器2026-03-10
vscode调试c代码始终找不到exe可执行文件的详细及解决办法
在 VS Code 中调试 C++ 项目时，常见报错：“无法启动调试会话：找不到可执行文件”，这个问题问题通常是由于环境配置不当、缺少编译步骤、路径设置错误、或是launch.json2026-02-27vscode入门! 小白都能看懂的VS Code保姆级级使用教程
相对于其它前端工具来说，VSCode显得更加的流畅，今天就将我的学习经历和大家分享一下，希望可以帮助到有需要的人2026-02-27- 2026年真正值得装、用得上、不鸡肋的 VSCode 插件，其实没那么多——挑10个“神级”不难，但得是每天打开就用、关掉就难受的那种2026-02-10
VS Code 和 VSCodium怎么选? vscode 和 vscodium之间的区别
咱们今天就来聊聊 Visual Studio Code (VS Code) 和 VSCodium的相似与区别，详细请看下文介绍2026-01-10VSCode有哪些扩展能显著提升前端开发体验? VSCode扩展推荐
微软的VSCode是一款流行的免费开源编辑器,由于其适应性强、稳健且拥有丰富的扩展生态系统，它吸引了来自所有专业的开发者的极大关注，这些扩展功能是实实在在的生产力提升2025-09-20VSCode如何灵活管理不同工作区? vscode配置文件工作区管理技巧
在vscode中高效管理多项目切换的核心方法是使用“工作区”功能，它允许整合多个项目并保存独立配置，今天我们就来看看VSCode的配置文件（JSON）如何灵活管理不同工作区2025-09-19VSCode代码重构工具怎么用? Refactoring重命名和提取操作的技巧
利用VSCode的重构功能提升代码维护效率，VSCode 的代码重构（Refactoring）工具支持哪些智能的重命名和提取操作？详细请看下文介绍2025-09-19
最新评论