vscode中html文件需通过http服务(如live server插件或python/node.js本地服务器)运行,而非file://协议预览,否则fetch、import等因cors被拒;live server默认端口5500,支持热更新但不重执行初始化逻辑。

VSCode 里点开 HTML 文件只是预览,不是“运行”
VSCode 本身不带 Web 服务器,双击或用 Open with Live Server 打开的 index.html,地址是 file:// 协议。这时候 fetch、XMLHttpRequest、import 等会直接失败,浏览器报 CORS policy: file:// protocol is not supported —— 不是你代码写错了,是协议卡死了。
真正能算“运行”的,只有启动一个本地 HTTP 服务,让页面走 http://localhost:xxxx。
- 别信右键菜单里的 “Open with Browser”,它和双击效果一样,都是
file:// -
Live Server插件是目前最省事的选择,它自动起http://127.0.0.1:5500这类地址 - 如果项目用了
import或要读取同目录 JSON,不用 HTTP 服务就必然报错
Live Server 插件怎么装、怎么用、默认端口在哪
它不是 VSCode 自带功能,得手动装插件。装完右键 HTML 文件,出现 Open with Live Server 才算生效。
- 插件名就叫
Live Server(作者:Ritwick Dey),VSCode 扩展商店搜这个名,别下错成vscode-live-server(老版本已停更) - 第一次点击后,右下角弹出
Starting Live Server...,然后自动在默认浏览器打开http://127.0.0.1:5500/xxx/index.html - 端口号默认是
5500,想改就去 VSCode 设置搜liveServer.settings.port,填数字就行(比如3000) - 它支持热更新:保存 HTML/CSS/JS 后,页面自动刷新,但不会触发
console.log('page loaded')这种初始化逻辑重跑
不用插件?用 Python 或 Node.js 起个最小 HTTP 服务
有些环境不能装插件(比如公司锁死扩展),或者你想确认底层原理,就绕过插件自己起服务。
十天学会易语言图解教程用图解的方式对易语言的使用方法和操作技巧作了生动、系统的讲解。需要的朋友们可以下载看看吧!全书分十章,分十天讲完。 第一章是介绍易语言的安装,以及运行后的界面。同时介绍一个非常简单的小程序,以帮助用户入门学习。最后介绍编程的输入方法,以及一些初学者会遇到的常见问题。第二章将接触一些具体的问题,如怎样编写一个1+2等于几的程序,并了解变量的概念,变量的有效范围,数据类型等知识。其后,您将跟着本书,编写一个自己的MP3播放器,认识窗口、按钮、编辑框三个常用组件。以认识命令及事件子程序。第
立即学习“前端免费学习笔记(深入)”;
- Python 3 用户:终端进 HTML 所在目录,执行
python -m http.server 8000,然后访问http://localhost:8000/index.html - Node.js 用户:全局装
http-server:npm install -g http-server,再运行http-server -p 8080 - 注意路径:必须在 HTML 文件所在目录或其父目录执行命令,否则 404;
http-server默认只 serve 当前目录 - Python 2 的
python -m SimpleHTTPServer 8000已淘汰,别用
为什么改了代码没反应?常见缓存和路径陷阱
Live Server 看似自动刷新,但几个地方容易让你以为“没生效”。
- 浏览器强缓存 JS/CSS:按
Ctrl+Shift+R(Windows)或Cmd+Shift+R(Mac)硬刷新,绕过缓存 - HTML 里写了绝对路径如
src="/js/main.js",而文件实际在./js/main.js—— Live Server 根目录就是当前打开的文件夹,/指的就是它,别加多余斜杠 - VSCode 左侧资源管理器里右键点的是子文件夹里的 HTML,但 Live Server 实际以整个工作区根为服务根目录(除非你用“以文件夹形式打开”)
- 修改了
index.html但浏览器标签页关了又手动输地址打开的——这会断开 Live Server 连接,得重新右键点“Open with Live Server”
最常被忽略的一点:Live Server 不监听非当前工作区根目录下的文件变动。如果你把项目放在 D:\web\demo\,却用 VSCode 打开了 D:\web,那改 demo/ 里的文件,它可能不刷新。










