live server是唯一能真正运行含fetch/import等特性的html的方式，需安装ritwickdey原版插件、以文件夹形式打开项目、右键已打开的html文件选择“open with live server”启动http服务。
VSCode 本身不运行 HTML，它只编辑文件；真正“运行”HTML 的是浏览器——但不同打开方式会导致功能完全失效或正常，关键在是否绕过 file:// 协议限制。
Live Server 是唯一能跑真实前端代码的方式
只要你的 HTML 里用了 fetch()、import、./data.json、../js/app.js 或任何模块化/异步加载逻辑，file:// 下必报错。Live Server 启动的是真正的本地 HTTP 服务（如 http://127.0.0.1:5500），浏览器按 Web 标准加载资源。
- 必须安装官方插件：
ritwickdey.LiveServer（作者 Ritwick Dey，别选同名但 ID 不同的“精简版”） - 必须用“打开文件夹”方式加载项目，单独拖一个
.html文件进来，插件不会激活 - 右键编辑器内已打开的 HTML 文件 →
Open with Live Server，或点状态栏右下角Go Live按钮（仅当当前编辑器有已保存的.html文件时才显示） - 端口被占？点状态栏右下角端口号 →
Change Port换个数字即可
双击或右键“在浏览器中打开”只适合纯静态页面
这种方式走的是 file:///C:/project/index.html 路径，浏览器出于安全策略会禁用大部分 Web API。你看到页面渲染出来，不代表它真能跑。
-
fetch('./config.json')→ 控制台报Not allowed to load local resource -
<script type="module"></script>→ 报Failed to load module script - 相对路径
../css/main.css很可能 404，而./img/logo.png偶尔能显示（取决于浏览器宽松程度） - 适合场景：只有
<h1></h1>、<p></p>、内联样式和脚本的单文件演示页
tasks.json 配置浏览器启动命令要分平台写
想在 VS Code 内一键调用 Chrome/Firefox 打开当前 HTML，得手动配 tasks.json，但 Windows/macOS/Linux 命令完全不同，且不能解决 file:// 限制问题——它只是把双击操作自动化了。
- Windows：
"command": "start"+"args": ["", "${workspaceFolder}/${relativeFile}"] - macOS：
"command": "open"+"args": ["-a", "Google Chrome", "${workspaceFolder}/${relativeFile}"] - Linux：
"command": "xdg-open"+"args": ["${workspaceFolder}/${relativeFile}"] - 注意：
${relativeFile}是相对路径变量，如果文件没保存过，它为空，任务会失败
真正容易被忽略的点是：不是所有 HTML 文件都“平等”。哪怕你装了 Live Server，如果当前编辑器没打开并聚焦在那个 .html 文件上，右键菜单里根本不会出现 Open with Live Server —— 它不会出现在资源管理器里右键的文件上，只出现在编辑器标签页内的右键菜单里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
