必须用 live server 启动本地 http 服务，否则 fetch、import 和相对路径资源因浏览器对 file:// 协议的硬性封锁而全部失败；live preview 无法替代，因其不启 http 服务、不执行 js 且不支持协议级功能。
必须用 Live Server 启动本地 HTTP 服务，否则所有 fetch、import、相对路径资源都会失败——这不是代码问题，是浏览器对 file:// 协议的硬性封锁。
为什么右键“在浏览器中打开”总报错
VSCode 内置的 Open in Default Browser 或双击 HTML 文件，走的全是 file:// 协议。浏览器直接拒绝加载模块、禁止跨文件读取、不支持 localStorage，连 ./data.json 都会触发 Not allowed to load local resource 错误。
-
fetch('./data.json')→ 控制台红字报错，请求根本发不出 -
<script type="module"></script>→ 直接卡在Failed to load module script -
../css/main.css→ 404，但./img/logo.png有时能显示（取决于浏览器宽松程度） - Service Worker、WebSocket、
history.pushState全部不可用
Live Server 怎么装、怎么用才不踩坑
只认作者是 Ritwick Dey 的原版插件（扩展 ID：ritwickdey.LiveServer），其他同名插件大概率不更新或删减功能。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 安装后必须重启 VSCode 或点“重新加载”，否则右键菜单和状态栏不会出现选项
- 必须通过
File → Open Folder打开整个项目文件夹，单独拖一个index.html进来，插件压根不激活 - 启动方式优先选右键 HTML 文件 →
Open with Live Server；状态栏Go Live按钮只在已保存的 .html 文件处于活动标签页时才可用 - 默认端口
5500被占？点右下角端口号 →Change Port换个数字（如3000或8080）
CSS/JS 修改后没生效？先看这三处
Live Server 本身没问题，90% 的“不刷新”是环境或缓存干扰。
- 浏览器地址栏不是
http://127.0.0.1:5500/xxx.html，而是file:///开头 → 关掉旧标签，重新右键启动 - Chrome/Firefox 默认强缓存 CSS：打开开发者工具 →
Network标签 → 勾选Disable cache（仅 DevTools 打开时生效） - HTML 中路径写错，比如
href="css/style.css"，但实际磁盘结构是./assets/css/style.css→ 路径必须严格匹配文件物理位置 - 用了多层
@import的 CSS 文件，Live Server 对嵌套热重载支持不稳定，建议扁平化引入
Live Preview 能不能替代 Live Server
不能。Live Preview（微软官方插件 ms-vscode.live-preview）只是在 VSCode 内置 WebView 中做静态渲染，不启 HTTP 服务，也不执行 JS。
- ✅ 支持已保存的
.html、.css、.md文件，修改后约 300ms 自动刷新 - ❌ 不执行
console.log、不发任何网络请求、不加载<script src="app.js"></script>里的逻辑 - ❌ 不支持
localStorage、Service Worker、WebSocket，相对路径解析也常因无协议上下文而失败 - ❌ 未保存的临时文件（如
Untitled-1）、非标准后缀（如.svelte）全部不识别
真正容易被忽略的是：只要页面里有一行 fetch 或一个 import，Live Preview 就注定白屏或报错——这不是它不够好，是它设计上就绕不开协议层级的限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
