双击运行html文件失败的主因是文件后缀错误、路径含中文/空格或js依赖http协议。需确保保存为utf-8无bom的index.html，图标为浏览器图标，路径纯英文，并用live server或http-server启动本地服务。
直接双击打开就能运行，但多数人卡在“文件没保存对”或“浏览器拒绝加载”这一步。
保存 HTML 文件必须带 .html 后缀且选对编码
Windows 记事本默认会把文件存成 index.html.txt，图标看着像网页，实际是文本文件——双击只会用记事本打开，不会渲染。VS Code 等编辑器右下角显示的编码如果是 UTF-8 with BOM，中文可能乱码或脚本执行失败。
- 保存时在“文件名”栏手动输入
index.html（不能只输index） - “保存类型”必须选“所有文件”，不是“文本文档”
- 编码选
UTF-8（无 BOM），VS Code 右下角点击编码名可切换 - 保存后检查文件图标：应显示为 Chrome/Edge/Firefox 图标，不是记事本图标
双击打不开？先看地址栏是不是 file://
双击后如果页面空白、显示源码、或报错 Failed to load resource: net::ERR_FILE_NOT_FOUND，大概率是浏览器安全策略拦截了本地资源加载。这时要确认地址栏开头是不是 file:/// 路径，且路径里不含中文、空格或特殊符号（比如 C:\我的项目\test.html 就容易出问题）。
- 把文件移到纯英文路径下测试，例如
C:\demo\index.html - 右键文件 → “属性” → 确认“打开方式”关联的是 Chrome 或 Edge，不是其他程序
- 按
Ctrl+O在浏览器里手动打开，比双击更可控
JS/CSS 外链或 fetch 请求失败？别硬扛 file:// 协议
现代浏览器对 file:// 协议限制极严：AJAX、import 模块、fetch 本地 JSON、甚至某些 CSS @import 都会被跨域拦截，控制台报 Access to script at 'file:///xxx' from origin 'null' is therefore not allowed。
- 这种情况必须启动本地 HTTP 服务，不能靠双击
- 有 Node.js 的话，进文件目录运行：
npx http-server，然后访问http://localhost:8080 - 没装 Node.js？VS Code 安装
Live Server插件，右键 HTML 文件选Open with Live Server - 注意：Live Server 默认端口是 5500，不是 8080；npx http-server 默认是 8080
真正卡住人的从来不是“怎么运行”，而是“为什么我明明双击了却什么都没发生”。重点盯住三件事：文件后缀是否真实是 .html、路径是否含中文/空格、JS 是否依赖 HTTP 协议——这三点漏掉任意一个，就等于没运行成功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
