直接双击index.html仅适用于纯静态页面；若使用fetch、import等特性，必须通过http服务器（如live server插件或npx http-server）以http://localhost运行，否则因file://协议限制导致资源加载失败。

直接双击 index.html 就能看效果，但如果你的页面用了 fetch()、import 或外链 CSS/JS，大概率会白屏或报错——这不是代码写错了，是浏览器在 file:// 协议下主动拦掉了这些功能。

双击打开为什么有时不工作

Windows/macOS 双击 index.html 本质是走 file:/// 协议，浏览器出于安全限制，会禁止：

• XMLHttpRequest 和 fetch() 请求本地文件（跨域错误：Failed to load resource: net::ERR_FAILED）
• ES 模块导入（import 报 Failed to load module script）
• 某些 localStorage 或 Service Worker API 的初始化

静态文本、内联样式、内联脚本通常没问题；只要涉及外部资源加载或现代 JS 特性，就得换方式。

VS Code 里点一下就跑：Live Server 插件

这是开发时最省心的方式，它自动起一个 http://localhost:5500 服务，并监听保存自动刷新。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• 在 VS Code 扩展市场搜 Live Server，安装并重启编辑器
• 右键你的 index.html 文件 → 选 Open with Live Server
• 浏览器自动打开，改完 HTML/JS/CSS 保存后页面立刻更新
• 注意：默认端口是 5500，如果被占用了，插件会在终端提示新端口（比如 http://127.0.0.1:5501）

不用装插件：用命令行起个最小 HTTP 服务器

适合没装 VS Code、或者想确认是否真和环境有关的排查场景。

• 确保已安装 Node.js（终端输入 node -v 能看到版本号）
• 进入你的 HTML 文件所在目录，运行：npx http-server
• 终端会输出类似：Starting up http-server, serving . 和 Available on: 后跟 http://127.0.0.1:8080
• 复制那个地址，粘贴到浏览器——这时所有 fetch、import 都能正常工作
• 不想装全局工具？npx 是临时调用，无需 npm install -g

Python 用户可选：一行命令启动

如果你系统自带 Python 3（macOS/Linux 默认有，Windows 安装时勾选了 Add Python to PATH），更轻量：

• 终端进入项目目录，执行：python -m http.server 8000
• 访问 http://localhost:8000 即可
• 注意：Python 2 是 python -m SimpleHTTPServer 8000，但已淘汰，别混用
• 这个服务器不支持 HTTP/2 或 CORS 头自定义，日常调试完全够用

真正容易被忽略的不是“怎么打开”，而是“为什么打开后功能异常”——绝大多数时候，问题不出在代码，而出在协议上。只要看到控制台报 net::ERR_FAILED 或 Blocked loading resource，第一反应该检查是不是还在双击运行。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！