双击打不开index.html是因file://协议下浏览器禁止跨文件读取资源；解决方法是打包成单HTML文件（内联JS/CSS、图片转data-url）或用Live Server插件起本地HTTP服务。
直接发 index.html 文件就行，但别人打不开？
不是文件本身有问题，而是浏览器安全策略在拦你。本地双击打开的 index.html 如果用了 fetch、XMLHttpRequest、import 动态模块，或者引用了同目录下的 .js / .json，大概率报 CORS error 或 net::ERR_FILE_PROTOCOL —— 因为 file:// 协议下，现代浏览器禁止跨文件读取资源。
怎么让别人双击就能看（且功能正常）
核心是：把所有资源打包成单个 HTML 文件，消除外部依赖。
- 把
script标签里的src="main.js"拆出来，内容直接贴进<script></script>里 - 把
style标签的href="style.css"换成内联样式：<style>...</style> - 图片用
data-url：右键 VS Code 里图片 → “Copy Image as Data URL”，粘贴到<img src="data:image/png;base64,..." alt="vscode自己制作的html怎么发送给别人" > - 如果用了字体或图标，也转成
data-url或内联@font-face
想保留原始结构（多文件），又让别人能运行
那就不能靠双击，得起一个最小 HTTP 服务。VS Code 自带扩展最省事：
- 装插件：
Live Server（作者 Ritwick Dey） - 右键
index.html→ “Open with Live Server” - 它会自动启动本地服务（如
http://127.0.0.1:5500），生成一个可分享的链接 - 别人只要在同一局域网，用自己电脑浏览器访问这个地址就能看（注意关防火墙/确认端口没被占）
别用 python -m http.server 之类命令行方式——容易漏配 MIME 类型，导致 .js 被当成纯文本下载。
立即学习“前端免费学习笔记（深入）”；
发给别人前必须检查的三件事
哪怕你用了 Live Server，发之前也要确认对方环境没埋雷：
- 删掉所有
console.log和debugger，避免暴露路径或逻辑 - 检查所有
fetch('/api/xxx')—— 这类请求在别人机器上必然失败，要么 mock 成静态 JSON，要么注释掉 - 确认没有硬编码的绝对路径，比如
../assets/config.json，改成相对路径或内联数据
最常被忽略的是：你以为“只是个静态页面”，结果里面悄悄连了本地后端、读了 localStorage、甚至调了 navigator.geolocation —— 这些在别人电脑上要么报错，要么静默失效。
