VS Code 无内置 HTML 运行环境，“一键运行”依赖插件；Live Server 是首选，因其启动本地 HTTP 服务（如 http://127.0.0.1:5500）绕过 file:// 协议限制，支持 fetch、模块导入和相对路径跳转。
vs code 本身不带 html 运行环境，所谓“一键运行”其实是靠插件启动本地服务器或调用浏览器打开文件——直接双击 index.html 或右键 open with live server 才是真·有效路径。
Live Server 插件为什么是首选
VS Code 默认打开 HTML 文件只是用浏览器以 file:// 协议加载，此时 fetch、XMLHttpRequest、模块导入（import）基本全挂，跨域报错是常态。Live Server 启的是 http://127.0.0.1:5500/ 这类本地服务，绕过限制。
- 安装插件后，右键文件 →
Open with Live Server，自动唤起浏览器并监听文件变化 - 端口可改：在 VS Code 设置里搜
liveServer.settings.port，填数字即可（避免被占用） - 不支持
file:协议下的相对路径跳转（比如），但 HTTP 服务下完全正常
不用插件时的替代方案（仅限简单预览）
如果只是看静态结构、没 JS 交互或资源加载需求，可以绕过服务器：
- 右键 HTML 文件 →
Reveal in Explorer→ 双击用系统默认浏览器打开（注意地址栏是file://开头） - 终端里执行
start index.html（Windows）或open index.html（macOS）也能触发，但同样受file:协议限制 - Chrome 启动时加参数可临时禁用安全策略：
chrome.exe --user-data-dir="C:/temp" --unsafely-treat-insecure-origin-as-secure="http://127.0.0.1:8080" --user-data-dir=/tmp/chrome-test，但太重，不推荐日常用
常见错误：点了右键没反应 or 浏览器打不开
不是 VS Code 坏了，大概率是这三件事没做：
- 没装
Live Server插件（名字带「Ritwick Dey」作者标识的那个） - 文件没保存（
index.html标题栏带 * 号？必须先Ctrl+S） - 文件名含中文或空格（比如
我的页面.html），某些旧版 Live Server 会解析失败，改用index.html或page1.html再试
需要 Node.js 环境的进阶场景
如果项目用了 webpack、vite 或 create-react-app，Live Server 就不够用了——它只服务静态文件，不处理构建流程。
-
vite项目：终端进目录，运行npm run dev，它会起自己的开发服务器（默认http://127.0.0.1:5173） -
package.json里有"scripts": { "start": "serve -s build" }？那就运行npm start，别硬套 Live Server - VS Code 内置终端比外部命令行更方便：按
Ctrl+`呼出，输入命令即可，输出日志也一目了然
真正卡住人的，往往不是“怎么点”，而是没意识到 file: 和 http: 是两套世界；插件能省事，但得知道它替你挡了什么——比如相对路径解析、MIME 类型响应、CORS 头。这些细节不碰上错误，很容易被当成“功能正常”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
