live server是唯一能避开file://协议限制、使js/css/资源正常加载的方案，因浏览器用file:///打开本地文件时会拦截fetch、es模块导入等操作，导致cors或net::err_file_protocol错误；安装后须在html编辑器中右键选择“open with live server”，并配置端口、host和root路径，调试时需同步修改launch.json中的url、webroot和sourcemaps。
别装一堆插件，先装 Live Server —— 这是唯一能避开 file:// 协议限制、让 JS/CSS/资源正常加载的方案。
为什么不能直接双击 HTML 文件？
浏览器用 file:/// 协议打开本地文件时，会拦截几乎所有跨文件操作：fetch() 读 JSON、import ES 模块、XMLHttpRequest 加载同目录图片或数据，全报 net::ERR_FILE_PROTOCOL 或 CORS 错误。这不是你代码写错了，是浏览器安全策略本身禁止的。
常见现象包括：
- 控制台显示
Access to script at 'file:///xxx.js' from origin 'null' is not allowed - JS 里
fetch('./data.json')直接失败，连请求都发不出去 - 用
import引入模块时页面白屏，控制台报Failed to resolve module specifier
Live Server 怎么装、怎么用、关键设置在哪？
安装后必须在已打开的 .html 文件编辑器中右键，才能看到 Open with Live Server 选项 —— 在资源管理器里右键文件是没这个菜单的。
装完立刻要配的三项（VSCode 设置里搜关键词）：
-
liveServer.settings.port：改成3000或8080，避免和 Python 的http.server或其他服务冲突 -
liveServer.settings.host：设为0.0.0.0才能让手机或同事电脑通过局域网访问（比如http://192.168.1.100:3000） -
liveServer.settings.root：如果项目入口不在当前文件夹（比如 HTML 在./src/index.html，但静态资源在./public/），填./或./public让服务器根路径对齐
调试 JS 时，launch.json 必须同步改三处
VSCode 默认的 Chrome 调试配置（.vscode/launch.json）默认连 http://localhost:8080，而 Live Server 启的是 http://127.0.0.1:5500（或你设的端口）。不改就断连，F5 按了没反应。
最小可用配置只需改这三行：
{
"type": "chrome",
"request": "launch",
"url": "http://127.0.0.1:3000/index.html",
"webRoot": "${workspaceFolder}",
"sourceMaps": true
}
其中 url 必须和 Live Server 实际地址完全一致；webRoot 指向源码根目录，否则断点打不上；sourceMaps 开着才能调试编译后的代码。
最常被忽略的一点：Live Server 启动后，地址栏显示的是 http://127.0.0.1:3000/xxx.html，不是 file:///。只要看到这个 http:// 开头，说明协议正确，JS/CSS/资源加载才真正可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
