VS Code 内置预览无法运行 file:// 协议 HTML 是因浏览器安全限制，需用 Live Server 插件启 HTTP 服务或配置构建工具开发服务器。
VS Code 内置浏览器打不开 file:// 页面
VS Code 自带的“预览”功能（比如右键 → Open Preview）本质是用本地文件协议加载 HTML，但现代浏览器出于安全限制，默认禁止 file:// 协议执行脚本、读取本地资源或发起跨源请求。不是 VS Code 坏了，是浏览器故意拦的。
常见现象：Failed to load resource: net::ERR_FILE_NOT_FOUND、Access to script at 'file:///...' from origin 'null' has been blocked、按钮点击没反应、fetch() 直接报错。
- 别双击 HTML 文件再拖进 VS Code 标签页——那还是走
file:// - 用
Live Server插件最省事：安装后右键 HTML 文件 →Open with Live Server，自动起http://127.0.0.1:5500/xxx.html - 如果项目需要真实服务逻辑（如 API 代理、HTTPS），改用
npm start或python3 -m http.server 8000启动本地服务器，再访问http://localhost:8000
Live Server 插件启动后页面空白或报 404
多数是路径问题：Live Server 默认以当前打开的文件所在文件夹为根目录，但 HTML 里写的 src="js/app.js" 是相对路径，一旦文件结构嵌套深或用了 <base href="/">，就容易 404。
- 检查开发者工具（F12）→ Network 标签页，看哪个资源状态码是
404，点开看 Request URL 实际请求的是什么路径 - 避免在 HTML 中写绝对路径如
src="/js/app.js"，除非你明确配置了Live Server的"liveServer.settings.root": "/my-project" - 如果用了构建工具（Vite/Vue CLI），别依赖
Live Server，直接跑npm run dev—— 它们自带更完善的开发服务器
用 Edge/Chrome 打开 VS Code 里的 HTML 总是旧版本
浏览器缓存太强，尤其当文件没改名、没加时间戳、也没禁用缓存时，改完 HTML/CSS/JS 刷新页面根本看不到效果。
- 开发时按
Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新，跳过缓存 - 在开发者工具 → Network 标签页勾选
Disable cache（即使关闭 DevTools 也生效） - VS Code 设置里搜
files.autoSave，设为onFocusChange或afterDelay，避免编辑时没保存就预览
想用 VS Code 写前端却连基础交互都跑不起来
不是环境问题，是漏掉了关键前提：浏览器不能直接运行未托管的 JS 模块或 ES6+ 语法，而 VS Code 不会帮你转译或注入模块系统。
-
<script type="module"></script>必须通过http://或https://提供，file://下直接报错Failed to load module script - 用
import语句时，确保服务器返回的 MIME 类型是text/javascript（Live Server默认支持，Python 的http.server不支持） - 如果只是练手小 demo，把
type="module"去掉，改用传统<script src="xxx.js"></script>，先让逻辑跑通
真正卡住的往往不是 VS Code，而是对浏览器安全模型和模块加载机制的预期偏差。多看 Network 面板里哪一步挂了，比反复重装插件有用得多。
