Live Server是VS Code中唯一靠谱的“一键本地测试”方案，它启动真实HTTP服务绕过浏览器file://协议限制，解决fetch、import等失败问题；其他如tasks.json配置或Python/Node.js临时服务仅为备选。
Live Server 是唯一靠谱的“一键本地测试”方案
VS Code 本身不带 HTTP 服务器，file:// 协议下 fetch、import、相对路径跳转全会失败，这不是你代码的问题，是浏览器安全策略。Live Server 插件（作者 Ritwick Dey）启动的是真正的 http://127.0.0.1:5500/ 服务，绕过所有限制。
常见卡点：
- 右键没“Open with Live Server”？—— 没装插件，或装了但没重启 VS Code
- 点了没反应？—— 文件没保存（标题栏带 * 号就别点），或文件名含中文/空格（如
我的页面.html） - 端口被占？—— 在设置里搜
liveServer.settings.port，改个数字（比如3000）
别把“运行 HTML”和“打包 HTML”混为一谈
HTML 本身不需要打包：它不是可执行文件，没有编译环节。所谓“一键打包”，实际指三类不同场景：
- 前端工程化打包（如用 Webpack 打出
dist/目录）：需要配置webpack.config.js+npm run build，和“运行 HTML”完全无关 - 压缩单个 HTML 文件（删空格、注释）：可用插件如
HTML Boilerplate或命令行工具html-minifier - 把 HTML + CSS + JS 合成一个文件（内联资源）：需手动处理或用
inline-source等工具，不是 VS Code 原生能力
如果你只是写静态页面、查效果，Live Server 就够了；想上线部署，才需要真正打包流程。
立即学习“前端免费学习笔记（深入）”；
tasks.json 配置浏览器打开 ≠ 本地服务器
有人在 tasks.json 里写 chrome.exe --new-window file://${workspaceFolder}/index.html，这本质还是 file:// 协议，JS 里的 fetch('./data.json') 依然报跨域错误。
这种配置只适合纯展示、零交互的页面，且每次改完必须手动刷新。真要调试，不如直接装 Live Server —— 它的 Go Live 按钮就在状态栏右下角，点一下比敲配置快十倍。
如果非要用 tasks.json 启动真实服务器（比如 http-server），命令得写成：
"command": "http-server", "args": ["-p", "8080", "-c-1"]
-c-1 关闭缓存，避免改了 JS 看不到效果。
Python / Node.js 临时起服务，仅作备选
Live Server 失效时，可以用系统已有工具快速兜底：
- 有 Python 3：终端进项目目录，运行
python -m http.server 8000 - 有 Node.js：先
npm install -g http-server，再运行http-server -p 8080
注意：这些命令启动的服务地址都是 http://127.0.0.1:8000/ 这类，不是 file://，所以能跑 fetch 和模块导入。但它们不集成进 VS Code 编辑器，也没自动刷新，属于“能用就行”的临时方案。
真正容易被忽略的是：所有这些方案都依赖当前工作目录（即 VS Code 打开的文件夹）作为根路径。如果你在子目录里右键点 Live Server，它默认 serve 的是整个 workspace，不是该子目录 —— 资源路径容易错乱，这点很多人调半天才发现。
