VS Code 默认不预览 index.html，必须用 Live Server 启本地 HTTP 服务才能真正运行；双击或拖入浏览器走 file:// 协议会导致 fetch、ES 模块、跨级相对路径等全部报错，因浏览器安全策略拦截。
VS Code 默认不预览 index.html，必须用 Live Server 启本地 HTTP 服务才能真正跑起来——双击打开或拖进浏览器走的是 file:// 协议，JS、fetch、相对路径跨级引用大概率直接报错。
为什么右键没看到 “Open with Live Server”
不是插件没装好，而是当前文件没被识别为可服务的 HTML 文件：
- 文件必须已保存，且后缀是
.html（.htm或无后缀不行） - 右下角状态栏语言模式必须是
HTML，不是Plain Text；点一下就能切换 - VS Code 必须以**文件夹形式打开项目**（File → Open Folder），不能只打开单个
index.html文件 - 如果文件名是
_index.html或.index.html，Live Server 会主动跳过——它源码里硬编码过滤了fileName.startsWith('_')和fileName.startsWith('.')
点击 Go Live 后浏览器空白或 404
Live Server 默认只在工作区根目录起服务，且默认访问 http://127.0.0.1:5500/，也就是试图加载 /index.html。常见断点：
- 你的入口文件叫
home.html？那就得手动改 URL 为http://127.0.0.1:5500/home.html - 工作区根目录选错了：比如你实际在
/project/src/下编辑，但 VS Code 打开的是/project/，那 Live Server 就只认/project/index.html - 路径含中文或空格：旧版 Live Server 对非 ASCII 路径解析不稳定，建议全用英文小写+短横线命名
- 端口被占：它会自动换到
5501等，但浏览器可能还停在旧地址——看右下角状态栏提示的真实 URL 再刷新
修改代码后页面不自动刷新
Live Server 只监听 .html、.css、.js 等静态资源，默认不处理 .ts、.scss、.jsx。所以：
- 改了
style.scss？不会触发刷新，得先编译成style.css并确保 HTML 引用的是编译后的文件 - 开了自动保存（
Files: Auto Save设为onFocusChange或afterDelay）能减少手动Ctrl+S漏操作 - 如果用了构建工具（Vite、Webpack），就别依赖 Live Server——它只是轻量静态服务，不是开发服务器替代品
file:// 协议下能凑合用吗
能看结构，仅此而已。一旦涉及以下任一操作，必崩：
-
fetch('./data.json')→ 报net::ERR_FAILED（CORS 策略拦截） -
import { foo } from './utils.js'→Failed to load module script -
XMLHttpRequest请求本地 JSON 或 API - 图片路径写成
../assets/logo.png，部分浏览器因安全策略拒绝加载
真正要验证交互、样式响应、接口调用，file:// 是死路。Live Server 启的 http://127.0.0.1:5500 才是唯一可靠起点——哪怕只是临时改个 class 名，也得走这一步。防火墙或公司代理有时会拦 localhost，这时候终端日志显示 “Starting server” 却打不开页面，别重装插件，先查网络策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
