根本原因是Live Server以VS Code打开的文件夹为根目录，/开头路径（如/css/style.css）会从项目根查找，而非HTML所在子目录；若文件实际在src/css/下，则需改用./css/main.css等相对路径或调整项目结构。
Live Server 启动后图片/CSS/JS 仍 404
根本原因是 /css/style.css 这类以 / 开头的路径，只在 Web 服务器环境下有效，而它的“根”是 VS Code 当前打开的**工作区文件夹**（即你 File → Open Folder 选的那个目录），不是 HTML 文件所在子目录。
常见错误现象：
- 浏览器地址栏显示
http://127.0.0.1:5500/src/index.html，但/css/main.css却去请求http://127.0.0.1:5500/css/main.css—— 而实际文件在src/css/main.css - 控制台报
GET http://127.0.0.1:5500/css/main.css net::ERR_ABORTED 404
实操建议：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 确认工作区根目录是否正确：右键资源管理器顶部文件夹名 → “Reveal in Explorer”，看路径是否是你预期的项目根
- 把静态资源移到项目根下的
css/、js/、images/等目录，再用/css/main.css引用 - 如果必须保留在
src/下，改用纯相对路径：./css/main.css（HTML 和 CSS 同在src/）或../css/main.css（CSS 在上层） - VS Code 编辑时按住
Alt拖拽文件到href或src属性中，它会自动生成准确的相对路径
双击打开 HTML 时所有资源全 404
这是最典型的误用场景：file:// 协议下，/images/logo.png 会被解析为磁盘根目录（如 file:///C:/images/logo.png），而非你的项目文件夹。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 彻底避免在
src属性或href中使用以/开头的路径 - 一律用相对路径：
images/logo.png（同级）、../assets/icon.svg（上级）、./js/app.js（./可省略） - Windows 下严禁使用反斜杠：
images\logo.png是无效的，浏览器只认/ - 路径严格区分大小写：本地 Windows 可能不报错，但部署到 Linux 服务器必然 404
Vite/Webpack 等开发服务器启动后仍 404
这类工具默认 serve 根是项目根目录，但它们对资源路径的处理逻辑和 Live Server 不同——尤其是 public/ 目录有特殊地位。
关键区别：
-
public/js/app.js→ 可直接通过/js/app.js访问（被原样映射） -
src/assets/logo.png→ 必须经构建处理，不能用/assets/logo.png直接引用 - Vite 若配置了
base: '/myapp/'，所有资源 URL 会自动加前缀，import './main.js'最终加载的是/myapp/main.js
排查重点：
- 检查终端是否真启动成功：运行
npx vite后，确认端口没被占用（netstat -ano | findstr "5173"），否则可能假成功、服务未起 - 看 Network 面板里 404 请求的
Initiator列，如果是某个插件脚本（如content-script.js），禁用插件再试 - Chrome 打隐身窗口访问，排除广告屏蔽、油猴等扩展干扰
中文路径或空格路径引发的隐性 404
VSCode 自身支持中文路径，但底层工具链（Python subprocess、Node.js child_process、Git）在 Windows 上常因编码混乱导致路径截断或识别失败，表现为资源“存在却找不到”。
容易被忽略的点：
- 工作区路径含中文或空格（如
D:\我的项目\）时，Live Server 或 Vite 可能静默 fallback 到空服务 - 终端里执行
code .能打开，但图形界面点击文件打不开，大概率是环境变量或编码未继承 - WSL 中用
code /mnt/c/project/index.html会失败，应改用code /home/user/project/index.html
稳妥做法：
- 工作区路径全程使用英文、无空格、无符号（如
D:\dev\my-app） - 禁用 GitLens、Remote-SSH 等对路径敏感的扩展，逐个验证
- 若已用中文路径，优先重装 VSCode 到纯英文路径（
C:\tools\vscode），非配置可绕过
