VSCode本身不能运行HTML，真正离线运行需用浏览器直接打开file://协议文件；Live Server虽不需外网但依赖本地HTTP服务，属“本地联网”而非离线。
file:// 协议的 HTML 文件——这就是真正意义上的离线运行。
不过要注意：这种方式有硬性限制，不是所有代码都能正常工作。
为什么 Live Server 不算“离线”？
Live Server 启动的是 http://localhost:5500 这类本地 HTTP 服务，哪怕没连外网，它仍依赖 TCP/IP 协议栈和一个微型 Web 服务器进程。一旦禁用网络适配器、或系统防火墙拦截了端口，Live Server 就可能失败。它本质是“本地联网”，不是离线。
用 file:// 协议打开 HTML 文件（真离线）
这是唯一不需要网络、不启服务、不依赖插件的方案，所有现代浏览器都原生支持。
- 在 VSCode 中保存 HTML 文件，确保扩展名是
.html - 右键资源管理器里的文件 → “在资源管理器中显示”（Windows）或“在访达中显示”（macOS）
- 双击该文件，或右键 → “打开方式” → 选 Chrome / Edge / Firefox
- 地址栏会显示类似
file:///C:/project/index.html或file:///Users/xxx/project/index.html
✅ 优点：100% 离线，秒开，无任何依赖
❌ 缺点：以下功能全部失效：
-
fetch('./data.json')会报错CORS policy: No 'Access-Control-Allow-Origin' header -
import语句（ESM 模块）直接抛Failed to load module script - 相对路径加载
./js/app.js或./css/style.css在部分浏览器（尤其是 Chrome）中可能失败，需改用绝对路径或确保文件结构扁平 - 无法使用 Service Worker、WebRTC、某些 localStorage 行为也可能异常
离线场景下 JS 调试怎么搞？
你没法用 Debugger for Chrome 配 url（因为那是 HTTP 地址），但可以配 file 协议：
立即学习“前端免费学习笔记（深入）”；
- 安装
Debugger for Chrome插件（它支持file协议调试） - 在项目根目录创建
.vscode/launch.json，内容如下：
{
"version": "0.2.0",
"configurations": [
{
"name": "Open index.html (file://)",
"type": "chrome",
"request": "launch",
"file": "${workspaceFolder}/index.html",
"webRoot": "${workspaceFolder}",
"runtimeArgs": ["--disable-web-security"]
}
]
}
⚠️ 注意：--disable-web-security 是绕过 CORS 的临时手段，仅限离线调试用，不要用于日常浏览；且 Chrome 从 v120+ 开始对 file:// 调试更严格，若失败可换用 Edge（对 file 协议更宽容）。
哪些情况千万别用 file://？
如果你的 HTML 里包含以下任意一项，就别强求离线：
- 调用了
fetch或XMLHttpRequest加载本地 JSON/CSV - 用了
<script type="module">或import导入外部 JS - 依赖
base href或复杂路由（如前端 Router） - 要测试 PWA、离线缓存、或任何需要
service-worker.js的功能
这些必须走 HTTP 协议，哪怕只是 localhost —— 此时请接受“本地 HTTP ≠ 上网”，它不发包到外网，只是复用本机网络协议栈。真正的离线能力是有边界的，越靠近真实部署环境，就越难脱离 HTTP。
