HTML5文件在VS Code中白屏主因是使用file://协议触发浏览器安全限制，必须通过HTTP服务（如Live Server）运行；需确认地址栏为http://127.0.0.1、检查控制台CORS/模块/路径错误，并合理配置Live Server端口与根目录。
Visual Studio（尤其是 VS Code）里打开 HTML5 文件直接双击运行，或者用 Live Server 启动后页面白屏——大概率不是代码写错了，而是根本没走 HTTP 协议栈，浏览器因安全策略拒绝加载本地资源。
为什么 file:// 协议下 HTML5 会白屏
现代浏览器（Chrome/Firefox/Edge）默认禁止 file:// 协议下执行以下操作：
-
fetch()、XMLHttpRequest请求本地 JSON/JS/CSS（跨源限制） - 读取
localStorage或indexedDB（部分版本会禁用） - 使用
import加载 ES 模块（import './main.js'会报CORS错误） - WebGL / Canvas 2D 在某些混合资源路径下触发安全拦截
哪怕只是 引入一个本地 JS，控制台就会显示 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". —— 这不是你代码的问题，是协议问题。
VS Code 中必须用 HTTP 服务启动（Live Server 插件配置要点）
VS Code 默认的「Open with Live Server」插件多数情况能解决问题，但几个关键点常被忽略：
立即学习“前端免费学习笔记（深入）”；
- 确认右下角状态栏显示的是
http://127.0.0.1:5500/xxx.html，不是file:///C:/xxx.html - 如果点击后仍跳转到
file://，说明你没在 HTML 文件编辑器标签页中右键，而是从资源管理器里右键了文件夹或空白处 - Live Server 默认端口是
5500，若被占用会自动换端口（如5501），但某些本地防火墙或代理会拦截非标准端口，可手动在settings.json中固定："liveServer.settings.port": 8080
- 若项目含子目录（如
/src/index.html），Live Server 默认以项目根为 Web 根目录；想让/src成为根，需配置："liveServer.settings.root": "/src"
检查控制台报错时盯住三类关键错误
白屏后按 F12 打开开发者工具，切换到 Console 面板，优先看这三类：
-
Access to script at 'file:///C:/.../main.js' from origin 'null' has been blocked by CORS policy.→ 确认是否用了type="module"或fetch('./data.json')，必须切 HTTP -
Uncaught SyntaxError: Cannot use import statement outside a module→ 说明 JS 被当成了普通脚本加载，但实际写了 ES 模块语法，要么加type="module"，要么改用构建工具 -
GET http://127.0.0.1:5500/assets/logo.png net::ERR_ABORTED 404→ 路径写死了相对路径（如./assets/...），但当前 HTML 不在根目录；应统一用根相对路径/assets/logo.png，并确保 Live Server 的root配置匹配
临时绕过（仅限调试，勿用于交付）
极少数场景（比如快速验证一段纯 DOM 操作 JS），可以临时关闭 Chrome 安全策略启动：
新建快捷方式，目标栏写：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --user-data-dir="C:/temp/chrome_dev_test" --disable-web-security --disable-gpu --allow-file-access-from-files
注意：--allow-file-access-from-files 仅对 file:// 有效，且新版 Chrome 已逐步弃用；它不解决模块导入、Service Worker、WebAssembly 等依赖完整 HTTP 环境的功能。真正要跑 HTML5 应用，HTTP 服务不可跳过。
很多白屏问题其实卡在“以为自己在跑服务器，其实还在双击打开文件”。盯住地址栏协议和控制台第一行报错，比反复改 JS 逻辑快得多。
