必须用 HTTP 服务起页面,否则 fetch、import 等功能因浏览器拦截 file:// 协议而全部失败;Live Server 需安装 Ritwick Dey 原版插件,保存 HTML 后在编辑器内容区右键选“Open with Live Server”,地址栏显示 http:// 开头才生效。

必须用 HTTP 服务起页面,否则多页面跳转、fetch('./data.json')、import 模块语句全会失败——这不是代码问题,是浏览器对 file:// 协议的硬性拦截。
Live Server 插件怎么装、怎么点才生效
只装插件不等于能用:必须先保存好 .html 文件(不能是 Untitled-1),再在编辑器里右键已打开的文件内容区域,选 Open with Live Server。状态栏右下角出现 Go Live 按钮,也只对已打开且已保存的 HTML 文件生效。
- 插件必须是 Ritwick Dey 发布的原版,扩展 ID 是
ritwickdey.LiveServer - 如果右键没这个选项,检查是否在资源管理器里右键了文件名(那是错的),得在编辑器内容区右键
- 首次启动后地址类似
http://127.0.0.1:5500/index.html,端口被占会自动换,但建议提前配好
端口、根目录、局域网访问怎么调
默认 5500 端口经常和别的服务冲突,尤其你同时跑 Python 的 http.server 或另一个 Live Server 实例时。配置入口在 VSCode 设置(Ctrl+,)里搜关键词即可,不用改 JSON 文件。
-
liveServer.settings.port:填数字如3000,避免冲突 -
liveServer.settings.root:填相对路径如"./src",当项目结构是project/src/index.html时有用 -
liveServer.settings.host:设为"0.0.0.0"才能让手机或同事电脑通过同一 Wi-Fi 访问http://192.168.x.x:3000
为什么 Python http.server 有时也不行
它确实能起服务,但和 Live Server 有本质区别:不支持自动刷新、不识别 index.html 为默认入口(需手动输完整路径)、对 MIME 类型处理更简陋,某些现代 JS 特性(比如 import.meta.url)在非 127.0.0.1 域下可能异常。
立即学习“前端免费学习笔记(深入)”;
- Python 3 启动命令是
python -m http.server 8000,不是python3 -m http.server(Windows 上常错) - 路径含中文或空格时,
http.server在旧版本 Python 中会 404,Live Server 已修复此问题 - 它不会监听文件变化,改完 HTML 必须手动刷新,容易误以为“没生效”
真正关键的不是“怎么启动”,而是确认浏览器地址栏显示的是 http:// 开头——只要看到 file:///,就说明所有跨文件操作注定失败,别调代码,先换服务方式。


















