VSCode Webview 禁用 file:// 协议是底层安全策略，Preview HTML 扩展通过读取并注入 HTML 字符串实现静态预览，Live Server 则通过本地 HTTP 服务支持交互逻辑。
VSCode 内置浏览器（Webview）不能直接打开本地 file:// 文档，这是硬性限制，不是配置问题。
为什么 WebView 打不开本地 HTML 文件
VSCode 的 Webview 是沙箱环境，明确禁用 file:// 协议加载——哪怕你写 webview.panel.webview.html = '<iframe src="file:///path/to/doc.html"></iframe>'，也会被 CSP 拦截，控制台报错：Refused to frame 'file:///...' because it violates the following Content Security Policy directive。这不是扩展没装好，是 VSCode 底层安全策略强制拦截。
Preview HTML 扩展是最轻量的可行方案
它不走网络协议，而是把 HTML 文件内容读取为字符串，注入 Webview 渲染，绕过协议限制。适合纯静态文档（无 AJAX、无 ESM 模块、无 localStorage 依赖）。
- 安装扩展
Preview HTML（作者 tht13），重启 VS Code - 确保你的文档是
.html或.htm后缀，且已保存到磁盘 - 右键文件 →
Preview HTML，或按快捷键Ctrl+Shift+V（Windows/Linux）/Cmd+Shift+V（macOS） - 注意路径解析以工作区根目录为基准：若文档中引用
./css/style.css，该 CSS 必须位于 VSCode 当前打开的工作区根目录下，而非 HTML 文件同级目录
Live Server 是唯一支持交互逻辑的方案
如果你的离线文档含 fetch('./data.json')、<script type="module"> 或相对路径 JS/CSS，必须启用 HTTP 服务。Live Server 起的是 http://127.0.0.1:5500/xxx.html，不是 file://，因此能绕过所有浏览器对本地协议的功能封锁。
- 安装
Live Server（作者 Ritwick Dey） - 右键 HTML 文件 →
Open with Live Server（未保存的文件不会显示此选项） - 端口冲突时，在
settings.json中配"liveServer.settings.port": 3000 - 它不支持直接预览非工作区根目录下的 HTML（比如
/src/docs/manual.html），除非你在/src目录下重新打开一个 VS Code 窗口
别碰 Simple Browser 和 browser-preview
Simple Browser 扩展明确禁用 file://，点右键“Open in Simple Browser”对本地 HTML 必然失败，错误是 net::ERR_UNKNOWN_URL_SCHEME。browser-preview 表面能渲染，但底层仍是 file:// 加载，导致 fetch 静默失败、模块导入报错、开发者工具断点无效——它看起来在运行，实际 JS 逻辑全挂了。
真正可靠的离线文档预览，只有两条路：静态内容用 Preview HTML，带交互逻辑用 Live Server。任何试图“绕过协议限制”的方案（比如自定义 Webview 注入 iframe、用 Custom CSS and JS Loader 强行 fetch 外部资源）都存在 XSS 风险，且在 VSCode 1.85+ 版本中已被进一步收紧。
