双击打开html文件失败因file://协议禁用fetch等api；纯静态页可运行，含import/fetch需本地服务器；python http.server或vs code live server可解决，注意路径差异。
直接双击打开 HTML 文件为什么有时会失败
因为浏览器用 file:// 协议加载页面，不走网络栈，很多 Web API 被默认禁用。比如 fetch()、XMLHttpRequest 读本地 JSON 文件会报 net::ERR_FILE_NOT_FOUND；Service Worker 根本注册不了；部分浏览器对 localStorage 的同源判定也异常（每次双击新窗口可能算不同源）。
常见现象包括：按钮点击无反应、控制台报跨域或拒绝访问、图片路径明明正确却显示 404、Vue/React 路由白屏。
- 纯静态页面（只有 HTML + 内联 CSS/JS，无外部请求、无模块导入、无状态保持）→ 双击能跑
- 只要含
import、fetch('./data.json')、new Worker('./worker.js')→ 必须起服务 - 想调试真实环境行为（比如缓存策略、CORS 响应头）→ 只能走
http://localhost
Python http.server 是最轻量的本地服务器方案
不用装额外工具，Python 3 自带，命令只有一行，适合 90% 的新手调试场景。
进入项目根目录后运行：
python -m http.server 8000
然后访问 http://localhost:8000/index.html。注意：index.html 必须在当前目录下，否则要手动拼路径；端口可换，但别用 80 或 443（需管理员权限）。
- Windows 用户若提示
'python' 不是内部或外部命令，说明没加环境变量，改用py -3 -m http.server 8000 - Mac/Linux 用户如果提示
command not found: python，试试python3 -m http.server 8000 - 该服务器不支持 HTTP/2、不处理 POST 请求体解析、不代理 API，仅用于前端资源托管
VS Code 的 Live Server 插件比手敲命令更省心
它不只是起个服务，还自动监听文件变化、保存即刷新、支持 HTTPS（可选）、能配置默认浏览器和端口，且对多页项目友好（比如有 /admin/ 和 /user/ 子路由）。
安装插件后，右键任意 .html 文件 → “Open with Live Server”，就会自动打开浏览器并跳转到对应路径，比如 http://127.0.0.1:5500/src/login.html。
- 默认端口是 5500，可在 VS Code 设置里搜
liveServer.settings.port修改 - 如果页面 404，检查文件是否在工作区根目录下——Live Server 默认以工作区为服务根目录
- 它不解决后端逻辑问题，但能模拟真实部署路径，比如
./assets/logo.png能正确解析
在线编辑器适合快速验证，但别当成开发主力
CodePen、JSFiddle、StackBlitz 这类平台本质是把三块代码（HTML/CSS/JS）注入一个沙盒 iframe，不涉及真实文件系统，所以你写 <img src="cat.jpg"> 永远不会加载本地硬盘上的图。
它们真正的价值在于：分享可复现的最小问题、临时改邮件模板、给同事演示交互逻辑、查兼容性（比如 IE11 是否支持某个 CSS 属性）。
- CodePen 的 JS 面板默认包裹在
window.onload里，操作 DOM 安全；但若用了async脚本或动态 import，得手动处理时机 - JSFiddle 免费版有速率限制，连续点“Run”可能触发
429 Too Many Requests - StackBlitz 能跑 Vite，但上传大体积依赖（如
three.js）时容易卡在“Installing dependencies”
真正容易被忽略的是路径语义差异：本地双击时 ./data.json 指的是当前 HTML 文件所在目录；而用 http.server 时，它指服务启动目录下的 data.json；Live Server 则取决于你右键的是哪个文件——这些细微差别，往往导致“明明能跑，换个环境就挂”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
