双击html文件常因浏览器对file://协议的跨域限制导致白屏或报错；应使用live server插件或npx http-server启动本地http服务，或交付时将js、css、图片内联/编码为单文件。
直接双击 HTML 文件就能看到页面，但只要用了 fetch、import、图片路径或外部 CSS/JS，大概率会白屏或报错——这不是你代码写错了，是浏览器把 file:// 当作跨源请求拦掉了。
为什么双击打开经常出问题
Chrome、Firefox 在 file:// 协议下会把所有相对路径请求（比如 ./data.json、script.js）视为跨域，直接拒绝加载。典型错误信息长这样：Access to script at 'file:///xxx.js' from origin 'null' has been blocked by CORS policy.
常见表现包括：
- 文字没变色（CSS 没加载）
- 按钮没反应（JS 报 404 或被拦截）
-
fetch('./config.json')返回空响应或直接失败 - Vue/React 的模块语法（
import）直接报错
用 Live Server 插件最省事（VS Code 用户）
装好 VS Code 后，搜 Live Server 插件并安装，右键 HTML 文件点 Open with Live Server，它会自动起一个本地 HTTP 服务，并在浏览器打开 http://localhost:5500/xxx.html。
这个方式的好处：
- 不用记命令，不碰终端
- 保存文件后页面自动刷新
- 所有相对路径、
fetch、ES 模块都能正常工作 - 默认端口不冲突，适合多项目并行
命令行起服务：npx http-server 更通用
只要你装了 Node.js，进到 HTML 所在目录，运行：
npx http-server
就会输出类似 Starting up http-server, serving ./ 和 Available on: 后的地址，比如 http://127.0.0.1:8080。浏览器访问这个地址就行。
注意几个坑：
- 别用
python -m SimpleHTTPServer（Python 2），它不支持现代前端工具链需要的 HTTP 头 -
python3 -m http.server 8000可以，但它默认把当前目录当根路径，index.html必须放在最外层，不能藏在src/里再靠路径跳出来 - 如果 HTML 里写了
<img src="images/logo.png">，那images/文件夹必须和 HTML 文件同级
必须双击时怎么保命
交作业、发给客户、或者临时演示，只能给单个 HTML 文件？那就得绕开所有外部依赖：
- 把 JS 逻辑全写进
<script></script>标签内，别用src引入外部文件 - CSS 用
<style></style>内联，别link外部样式表 - 图片用 base64 编码塞进
src，比如<img src="data:image/png;base64,iVBOR..."> - 删掉所有
fetch、XMLHttpRequest、import，数据全写死在 JS 里
这听着麻烦，但真要交付“零依赖单文件”，这是唯一能绕过浏览器安全限制的办法。别指望 file:// 下还能跑现代 Web 功能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
