最稳解法是起本地HTTP服务：用python3 -m http.server 8000或npm install -g serve后运行serve，再访问http://localhost:8000；双击打开因file://协议限制导致fetch失败、CORS报错、图片路径异常等问题。
直接双击打开就报错：找不到 index.html 或空白页
本地双击打开 HTML 文件，本质是用 file:// 协议加载，浏览器会禁掉很多功能——比如 fetch 请求本地 JSON、XMLHttpRequest 读取同目录文件、甚至某些 import 模块语法。不是你代码写错了，是协议限制了。
常见现象：net::ERR_FILE_NOT_FOUND、Access to script at 'file:///...' from origin 'null' has been blocked、控制台一堆 CORS 报错。
- 最稳的解法：起一个本地 HTTP 服务，哪怕只开 5 秒 —— 用
python3 -m http.server 8000（Python 3.7+ 自带），然后在浏览器访问http://localhost:8000 - 如果对方电脑没装 Python，推荐
serve：先让对方全局装npm install -g serve，再进文件夹运行serve，自动打开页面 - 别打包成
.zip后发过去让人“解压双击”，除非你确认所有资源都是纯静态内联（CSS 写在<style>里、JS 全在<script>中、图片用data:base64）
用了 fetch('./data.json')，换台电脑就挂
这是 file:// 协议下最典型的翻车点。浏览器根本不允许从本地文件系统发起跨文件请求，哪怕 data.json 就躺在同一目录下。
解决方向只有一个：让所有资源走 HTTP 协议。
立即学习“前端免费学习笔记（深入）”；
- 把
fetch('./data.json')改成相对路径，但必须配合本地服务跑，比如http://localhost:8000/data.json才能正常返回 - 不想改代码？可以用
file-saver+Blob模拟数据，或把 JSON 内容直接塞进 JS 变量里（适合小数据） - 注意：Vite / Webpack 等开发服务器默认支持，但构建后生成的
dist文件夹仍需 HTTP 服务才能跑，不能双击index.html
图片路径明明对，为什么另一台电脑显示叉号
路径大小写、空格、中文名，在不同系统上表现不一致。Windows 对大小写不敏感，macOS 和 Linux 敏感；空格会被编码成 %20，某些旧浏览器处理不好；中文路径在部分环境直接 404。
- 统一用小写字母 + 短横线命名：把
我的图表.png改成my-chart.png - 路径全部用相对路径，且以
./开头（如<img src="./assets/logo.png">），避免../跨级带来的不确定性 - 检查实际文件是否真被一起复制过去——压缩包漏了子目录、Git 忽略了图片、同步工具跳过了隐藏文件，都很常见
对方说“打不开”，但你本地一切正常
别急着怀疑对方电脑，先问清三件事：是怎么打开的（双击？拖进浏览器？输地址？）、浏览器是什么版本（老版 IE 不支持 fetch、async/await）、有没有看控制台报错（F12 → Console）。
最容易被忽略的是 MIME 类型和字符编码。如果 HTML 文件保存时用了 UTF-8 with BOM，某些浏览器会解析失败，开头多出乱码导致 JS 报错。
- 用 VS Code 或 Notepad++ 把文件另存为 “UTF-8 无 BOM” 编码
- 在
<head>里显式声明：<meta charset="utf-8">，别依赖浏览器猜测 - 如果用了现代语法（
?.、??、Promise.allSettled），加个core-jspolyfill 或检查目标环境支持度
真正麻烦的从来不是“怎么让它跑起来”，而是“怎么让别人不用装一堆东西、不改配置、不查文档，点一下就看到你想要的效果”。HTTP 服务是最小必要条件，其余全是围绕它打补丁。
