自己写的html如何在别的电脑上也能打开

最稳解法是起本地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 写在


  里、JS 全在 中、图片用 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
• 路径全部用相对路径，且以 ./ 开头（如 ），避免 ../ 跨级带来的不确定性
• 检查实际文件是否真被一起复制过去——压缩包漏了子目录、git 忽略了图片、同步工具跳过了隐藏文件，都很常见

对方说“打不开”，但你本地一切正常

别急着怀疑对方电脑，先问清三件事：是怎么打开的（双击？拖进浏览器？输地址？）、浏览器是什么版本（老版 IE 不支持 fetch、async/await）、有没有看控制台报错（F12 → console）。

最容易被忽略的是 MIME 类型和字符编码。如果 HTML 文件保存时用了 UTF-8 with bom，某些浏览器会解析失败，开头多出乱码导致 JS 报错。

• 用 VS Code 或 Notepad++ 把文件另存为 “UTF-8 无 BOM” 编码
• 在 里显式声明：，别依赖浏览器猜测
• 如果用了现代语法（?.、??、promise.allSettled），加个 core-js polyfill 或检查目标环境支持度

真正麻烦的从来不是“怎么让它跑起来”，而是“怎么让别人不用装一堆东西、不改配置、不查文档，点一下就看到你想要的效果”。HTTP 服务是最小必要条件，其余全是围绕它打补丁。