VSCode怎么用本地服务器运行代码html？Live Server配置指南-VSCode-PHP中文网

live server是最直接有效的html预览方案，但仅适用于需http协议支持的场景；双击打开因使用file://协议，会导致fetch、es模块导入、localstorage等api受限或失败。

vscode怎么用本地服务器运行代码html？live server配置指南

Live Server 是最直接有效的方案，但不是所有 HTML 场景都适合——关键看你要不要 HTTP 协议支持。

为什么不能直接双击 HTML 文件运行？

双击或用 Open in Default Browser 打开的是 file:// 协议页面。它不走 HTTP，会导致：
• fetch() 或 XMLHttpRequest 请求跨域失败（即使本地文件）
• ES 模块（import）加载报错：“Not supported in a document with no base URI”
• 本地 localStorage、Service Worker 等 API 可能受限或行为异常
• 开发时调试 AJAX 接口、前后端联调完全不可行

Live Server 启动后页面不自动刷新？

这不是插件坏了，而是监听机制没覆盖到你改的文件或路径。常见原因和对策：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

修改了非当前目录下的 CSS/JS 文件（比如放在 src/ 或 assets/），但 Live Server 默认只监听同级及子目录——检查 liveServer.settings.root 是否设对了
保存时文件未真正写入磁盘（如某些编辑器启用“延迟写入”或“原子保存”），可尝试关掉 VSCode 的 files.autoSave 改为手动保存再试
浏览器缓存强干扰：开发者工具 → Network 标签页 → 勾选 Disable cache（仅 DevTools 开着时生效）
用了符号链接（symlink）或网络挂载盘，Live Server 默认不追踪这类路径——需在 settings.json 中加 "liveServer.settings.useLocalIp": true 并确认防火墙放行端口

怎么让 Live Server 用 Chrome 而不是默认浏览器？

VSCode 不会自动读取系统默认浏览器设置，必须显式配置：

打开 VSCode 设置（Ctrl+,），搜索 live server custombrowser
找到 Live Server > Settings: CustomBrowser，设为 "chrome"（Windows/macOS/Linux 都认这个值）
如果 Chrome 不在标准路径（比如便携版或自定义安装），还需配 Live Server > Settings: CustomBrowserPath，填绝对路径，例如："C:\Program Files\Google\Chrome\Application\chrome.exe"
注意：改完设置后，已启动的 Live Server 不会自动切换浏览器，需右键重新选 Open with Live Server

HTTPS 本地预览必须自己搞证书？

是的，Live Server 原生不提供可信 HTTPS，但启用它比想象中轻量：

不需要 OpenSSL 命令行；用 mkcert 更简单：choco install mkcert（Win）或 brew install mkcert（macOS），然后执行 mkcert -install && mkcert localhost，生成 localhost.pem 和 localhost-key.pem
在 VSCode 设置里开启 Live Server > Settings: Https，并把两个文件路径分别填进 Cert 和 Key 项
重启 Live Server，地址就变成 https://127.0.0.1:5500，浏览器不会报“不安全”，Service Worker 也能注册
⚠️ 注意：每次换项目目录都要复制证书过去，或统一放在工作区根目录下，避免路径失效