VS Code没有“一键运行到浏览器”功能，需根据项目类型选择对应方案：静态页面用live-server扩展；React/Vue等现代项目必须使用框架自带dev server（如npm run dev），并避免file://直接打开。
VS Code 里没有“一键运行到浏览器”功能
VS Code 本身是个编辑器，不带内置 Web 服务器或浏览器启动能力。所谓“运行到浏览器”，本质是：启动一个本地服务（比如 http-server、live-server 或框架自带的 dev server），再用系统命令打开浏览器访问对应地址。直接按 F5 或 Ctrl+Shift+F5 不会生效——除非你配好了调试配置。
最简单可行的方案：用 live-server 扩展
这是前端静态文件（HTML/CSS/JS）最快上手的方式，适合学习、原型、小项目。
- 在 VS Code 扩展市场搜
live-server，安装由 Ritwick Dey 发布的那一个 - 打开一个含
index.html的文件夹（不是单个文件） - 右键点击
index.html→ 选择Open with Live Server - 它会自动：启动本地服务（默认端口
5500）、用默认浏览器打开http://127.0.0.1:5500、监听文件变化并热重载
注意：live-server 不能处理后端路由（比如访问 /user/profile 会 404），也不支持环境变量或构建步骤。纯 HTML 页面没问题；React/Vue 项目请别用它。
React/Vue 等现代前端项目：必须用框架自己的 dev server
这类项目有构建流程、模块解析、HMR（热更新）等依赖，绕不开 npm run dev 或 yarn dev。
- 确保项目根目录下有
package.json，且scripts中定义了dev命令（如 Create React App 是react-scripts start） - 在 VS Code 终端中执行
npm run dev，服务通常启动在http://localhost:3000（React）或http://localhost:5173（Vite + Vue） - VS Code 不会自动打开浏览器——你可以手动输入地址，或装
open-in-browser扩展，再绑定快捷键 - 别试图用
file://直接打开打包后的dist/index.html：会因跨域导致 API 请求失败、路由跳转异常
常见错误和坑
很多人卡在这几步，不是不会操作，而是没意识到底层机制：
- 报错
Cannot GET /xxx：说明用了live-server却访问了前端路由路径（如/about），应改用框架 dev server 并开启historyApiFallback - 修改代码没刷新：检查是否真在
live-server或 dev server 下运行，而不是双击 HTML 用file://打开 - VS Code 调试按钮（F5）点不动：因为没配置
.vscode/launch.json，且对纯前端项目，这配置通常没必要——浏览器开发者工具更直接 - 端口被占用（如
EADDRINUSE）：在终端加参数指定端口，例如npx serve -p 4000或npm run dev -- --port 4000
真正的分水岭不在“怎么点”，而在于分清当前项目类型：静态页？Webpack 打包？Vite？Next.js？不同结构对应完全不同的启动逻辑，混用只会触发更多 404 和 CORS。
