直接双击HTML文件失败，因浏览器对file://协议严格限制fetch、XMLHttpRequest、ES模块导入等；必须用http://localhost本地服务器（如python -m http.server 8000）运行才能真实模拟线上环境。
直接双击打开 HTML 文件在多数情况下会失败——fetch 报错、XMLHttpRequest 被拦截、import 语句拒绝执行，根本原因是浏览器对 file:// 协议的严格限制。必须用 http:// 协议启动本地服务器才能真实模拟线上环境。
为什么不能直接双击 HTML 文件调试
现代浏览器（Chrome、Edge、Firefox）默认禁止 file:// 下的以下行为：fetch() 和 XMLHttpRequest 请求（除非目标是同目录下的本地文件，且仍受 CORS 策略干扰）；import ES 模块（报 Failed to resolve module specifier）；localStorage 在部分 iOS Safari 版本中失效；相对路径在 JS/CSS 中可能意外解析为绝对路径。这些不是代码 bug，而是协议层限制，绕不开。
用 Python 快速起一个无依赖的本地服务
如果你没装 Node.js，但系统有 Python 3.6+，这是最快启动方式，5 秒内可用：
- 打开终端，进入 HTML 文件所在目录（例如
C:\my-project或/Users/me/project） - 运行命令：
python -m http.server 8000 - 浏览器访问
http://localhost:8000/index.html（注意：不是双击文件，也不是file://路径）
该服务不支持热重载，但完全规避了所有 file:// 限制，适合快速验证 AJAX、模块导入或表单提交逻辑。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
用 http-server 启动带缓存控制和代理的调试服务
当你需要禁用缓存、转发 API 请求或指定端口时，http-server 比 live-server 更可控：
- 全局安装：
npm install -g http-server - 启动时加关键参数：
http-server -p 3000 -c-1 --proxy http://localhost:8081/api/ -
-c-1强制禁用所有静态资源缓存，避免 CSS/JS 修改后不生效 -
--proxy将所有/api/xxx请求代理到后端开发服务，无需 CORS 配置 - 它不监听文件变化，所以修改 HTML 后需手动刷新，但稳定性高于热重载工具
VS Code 的 Live Server 插件常见陷阱
Live Server（Ritwick Dey 开发）方便，但几个细节容易导致调试失败：
- 它默认以项目根目录为服务根路径，不是 HTML 文件所在目录 —— 如果你的
index.html在/src/pages/下，而css/app.css在/public/css/，路径会 404 - 右键菜单里必须选 “Open with Live Server”，而不是 “Open in Default Browser”（后者仍是
file://） - 插件启动后地址是
http://127.0.0.1:5500/src/pages/index.html，但如果你在 JS 里写了fetch("/api/data")，请求会发到http://127.0.0.1:5500/api/data，而非你后端的地址 —— 这时候得换http-server加--proxy - 它不支持 HTTPS 本地测试，若要测 Service Worker 或
secureContext相关 API，必须换其他方案（如mkcert+http-server -S）
最易被忽略的一点：所有这些本地服务器都只解决「协议问题」，不解决「路径问题」。HTML 中的 src、href、fetch() 地址必须相对于服务器根目录书写，而不是相对于 HTML 文件位置 —— 这一点在跨目录引用资源时，90% 的人第一次都会栽跟头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
