本地双击打开含中文或空格的HTML文件失败，因file://协议路径编码异常；fetch等API在file://下被CORS策略阻止；应使用本地HTTP服务（如Live Server、python -m http.server）替代。
用浏览器直接双击打开 .html 文件，但路径含中文或空格会失败
本地双击打开 index.html 看起来最简单，实际常卡在“空白页”或“找不到文件”。根本原因是浏览器通过 file:// 协议加载时，路径里的中文、空格、括号会被错误编码，file:///C:/my%20project/测试.html 可能被解析成乱码路径。
- 临时解决：把文件移到纯英文无空格路径下，比如
C:/demo/index.html - 长期建议：启动一个本地 HTTP 服务，而不是依赖
file://—— 大多数现代前端工具（如live-server、http-server、VS Code 的 Live Server 插件）都默认走http://localhost:xxxx，完全规避编码问题 - 注意：
fetch()、XMLHttpRequest、import()动态导入等 API 在file://下默认被浏览器阻止（CORS 策略），不是代码写错了，是协议限制
vscode 里右键 Open with Live Server 没反应？检查插件和端口
VS Code 的 Live Server 插件是目前最省心的本地预览方案，但它不是“装完就自动好用”——它依赖后台起一个微型 HTTP 服务，一旦端口被占或配置异常，右键菜单就灰掉或点击无响应。
- 先确认插件已启用：在 Extensions 里搜
Live Server，作者是Ritwick Dey，状态显示 “Enabled” - 检查端口冲突：默认用
5500，如果之前跑过其他服务（比如 Python 的http.server或另一个 VS Code 窗口），它会自动换到5501，但有时会卡住；可在设置里手动指定liveServer.settings.port配置项 - 右键菜单不出现？试试用快捷键
Ctrl+Shift+P→ 输入Live Server: Open with Live Server手动触发，看控制台报错
用 python -m http.server 启服务，为什么 Chrome 报 net::ERR_CONNECTION_REFUSED
这是命令行启动服务后立刻在浏览器输 http://localhost:8000 却打不开的典型表现。不是命令错了，而是你没等服务真正就绪就刷新了页面 —— 命令行输出 Serving HTTP on 0.0.0.0 port 8000 这一行出现前，服务还没监听成功。
- 执行后盯住终端：看到明确的“Serving HTTP on…”提示再开浏览器
- 别关终端窗口：这个服务进程必须持续运行，关了终端等于停服
- 端口被占？加参数换端口：
python -m http.server 8080，然后访问http://localhost:8080 - Python 2 用户注意：
python -m SimpleHTTPServer 8000是旧命令，新版本不认；统一用 Python 3 的http.server
Mac 上双击 .html 总是用 Safari 打开，想改默认用 Chrome？
系统级默认应用设置藏得深，而且 Safari 对本地 HTML 的兼容性有时比 Chrome 更“宽松”（比如允许 file:// 下读取同目录 JSON），所以强行换默认可能引入新问题。
立即学习“前端免费学习笔记（深入）”；
- 临时切换：右键文件 →
Open With→ 选 Chrome（注意勾选Always Open With） - 全局修改：右键任意
.html文件 →Get Info→ 展开Open with→ 选 Chrome → 点Change All… - 但注意：Chrome 从 v94 起默认禁用
file://下的fetch()和模块导入，即使开了也没用；真要调试这类功能，必须走本地 HTTP 服务
本地预览的核心矛盾从来不是“怎么打开”，而是“怎么绕过浏览器对 file:// 的限制”。只要涉及 AJAX、ES 模块、本地 JSON 加载，双击打开这条路基本走不通 —— 不是操作不对，是设计如此。
