VSCode如何运行HTML网页_VSCode实时预览插件推荐

用 VSCode 写 HTML 页面，很多新手都会卡在“怎么把页面跑起来”这一步。直接双击或右键“在浏览器中打开”，路径栏里显示的果然还是 file:// 协议——这种操作下，fetch、import、相对路径、甚至 localStorage 全都失效。别急着怀疑代码写错了，这其实是浏览器安全策略在卡脖子，根本不是你的问题。

要解决这个问题，最靠谱的方案就是上 Live Server 插件。不过这里面有几个关键细节，很多人一开始就踩了坑。

Live Server 插件怎么装才真正生效

插件必须选 Ritwick Dey 的原版，扩展 ID 是 ritwickdey.LiveServer。那些同名但作者不明、下载量低、没签名的“精简版”就别碰了。装完之后，一定要重启一次 VSCode，或者点一下“重新加载”，否则右键菜单和状态栏上那个 Go Live 按钮大概率不会出现。

还有三个经常被忽略的前提条件：

• 如果你只是把单个 index.html 文件拖进 VSCode，插件是不会启动的——必须用 File → Open Folder 打开整个项目文件夹
• 当前编辑器标签页没保存，标题栏上还带着 * 的，右键菜单里的 Open with Live Server 根本不会出现
• 文件扩展名必须是 .html，如果写成 .htm 或者干脆没后缀，服务照样不认

为什么改了 CSS/JS 浏览器没更新

遇到这种问题，别第一时间怀疑插件坏了。大概率是浏览器缓存，或者是路径错位。Live Server 默认只监听当前 HTML 所在目录下的文件变更，如果存在跨目录引用——比如 HTML 在根目录，而 js/app.js 实际放在 dist/js/ 下面——它就漏听了。

排查方向其实很清晰：

• 先看地址栏，如果显示的是 file:/// 而不是 http://127.0.0.1:5500/，说明压根没走 Live Server。关掉旧标签，重新右键启动
• Chrome DevTools 的 Network 面板里，Disable cache 勾了没有？CSS 修改后大概率被缓存，Ctrl+F5 强刷也未必能清干净
• 报了 404？Live Server 是以 HTML 文件所在目录为根路径的，不是工作区根目录。去磁盘上检查一下 ../css/style.css 到底存不存在

Live Preview 和 Live Server 到底该用哪个

很多人会被这两个名字搞混。Live Preview（扩展 ID：ms-vscode.live-preview）只在 VSCode 内置的 WebView 里渲染 HTML 和 CSS，不执行 JS、不发请求、不支持模块导入。而 Live Server 启动的是真实的 HTTP 服务，行为和线上环境完全一致。选哪个，取决于你此刻要验证什么。

如果只是调布局、看响应式、改改内联样式，用 Live Preview 就够了。点右上角那个眼睛图标，快、轻、没有端口冲突的问题。

但如果你的代码里写了 fetch('./data.json')、用了 、或者依赖 localStorage 存储数据——那就必须切到 Live Server，否则控制台报错是必然的。

两个插件可以共存，但别指望 Live Preview 帮你看到 console.log 输出或者 Network 请求，它连 WebSocket 都不支持。

一个容易被忽略的底层区别是：Live Preview 的“实时”仅限于静态渲染，而 Live Server 的“实时”依赖 HTTP 协议和 WebSocket 注入。一旦页面需要任何网络能力或 JS 运行时环境，file:// 和 vscode-file:// 就彻底出局了——这不是配置问题，是协议层级的硬边界。