Live Server插件安装后，右键HTML文件选择“Open with Live Server”，即可启动http://127.0.0.1:5500/xxx.html本地服务，绕过file://协议限制，支持fetch、模块导入、相对路径等，并保存自动刷新。
VS Code 里装 Live Server 插件后怎么用
Live Server 是目前最省心的本地预览方案，它启动的是真正的 HTTP 服务，能绕过 file:// 协议限制，让 AJAX、fetch()、图片相对路径、CSS @import 等都正常工作。
安装后不用改任何配置，直接在编辑器资源管理器中右键点击任意 .html 文件，选 “Open with Live Server” 就行。浏览器会自动打开 http://127.0.0.1:5500/xxx.html —— 注意不是 file:// 开头。
- 默认端口是 5500，如果被占用了，插件会自动换一个并显示在 VS Code 右下角状态栏
- 保存文件后页面自动刷新，但不会触发全页重载（类似热更新），适合快速调样式
- 不支持跨域请求调试（比如你本地 HTML 调用外部 API），这属于浏览器安全机制，和插件无关
- 别在项目根目录外双击打开 HTML 文件再点 Live Server，路径解析容易错乱
为什么双击 HTML 文件经常出问题
双击打开走的是 file:// 协议，浏览器出于安全考虑，会禁掉很多功能：AJAX 请求失败、localStorage 可能不可写、Service Worker 不注册、图片或 CSS 路径带中文就 404。
典型现象包括：net::ERR_FILE_NOT_FOUND、控制台报 Access to script at 'file:///...' from origin 'null' has been blocked、CSS 不生效但源码里明明写了。
立即学习“前端免费学习笔记（深入）”；
- 路径含中文、空格、特殊符号（如
我的项目 v2/首页.html）大概率失败 - 图片用
img/src="logo.png"没问题，但写成img/src="./img/logo.png"时，如果当前 HTML 不在根目录，就可能找不到 - 用记事本保存的 HTML 如果没选 “UTF-8 无 BOM”，中文会乱码，且部分浏览器直接拒解析
不用 VS Code 时怎么起本地服务器
命令行方式更通用，尤其适合 Sublime Text、Atom 或纯终端党。核心是用 http-server 这个轻量工具，它不依赖 Node.js 复杂生态，装完就能跑。
先确保已安装 Node.js（v14+），然后执行：
npm install -g http-server
进到你的 HTML 所在目录，运行：
http-server -p 8080 -c-1
-
-p 8080指定端口；-c-1关闭缓存，避免改了 CSS 看不到效果 - 浏览器访问
http://localhost:8080，会列出该目录下所有 HTML 文件，点开即可 - 如果项目有子目录（比如
/pages/about.html），直接访问http://localhost:8080/pages/about.html就行，路径解析比 Live Server 更直觉 - 注意别在父级目录（比如桌面）下运行，否则整个盘符都可能被当网站根目录暴露出去
在线编辑器里实时预览的局限在哪
像 https://config.net.cn/tools/HtmlEditor.html 这类在线工具，左右分屏写代码看效果很直观，但它们本质是把 HTML 字符串喂给 iframe 的 srcdoc 属性，或者用 DOMParser 动态渲染。
- 无法加载本地图片、字体、JS 文件——因为没真实文件系统，
<img src="logo.png">必然 404 - CSS 中的
@font-face、url()引用外部资源基本失效 - JavaScript 的
fetch('./data.json')会跨域失败，除非 JSON 内容硬编码进页面 - 适合练语法、写 demo 片段、教学演示，不适合调试含资源引用的真实项目
真正要验证路径、加载行为、网络请求是否正常，必须回到本地 HTTP 服务环境。这点很容易被忽略，尤其新手卡在图片不显示时，常以为是代码错了，其实是运行方式不对。
