根本解法是启动本地http服务器（如python3 -m http.server 8000），因file://协议下/被解析为磁盘根目录而非项目根目录，这是浏览器安全策略所致；临时调试可改用相对路径，但不可作为长期方案。
本地双击打开 HTML 时 / 开头路径总 404 怎么办
根本不是路径写错了，是 file:// 协议下浏览器把 /css/app.css 解析成 file:///css/app.css（磁盘根目录），而你的文件实际在 file:///D:/project/css/app.css。这种 404 和代码无关，纯属协议限制。
- 开发阶段必须用本地服务器启动，比如
python3 -m http.server或 VS Code Live Server - 双击打开时，所有以
/开头的href、src都会失效，这不是 bug，是file://本身没“站点根目录”概念 - 临时调试可全改用相对路径，如
css/app.css或../assets/css/app.css，但别把它当长期方案
Vite/Webpack 构建后上线，/xxx 路径突然 404
部署后 /css/app.css 找不到，大概率是构建配置和服务器根目录没对齐。浏览器永远按域名根目录解析 /，和 HTML 文件放哪完全无关。
- Vite 项目检查
vite.config.js中base配置：默认base: '/'表示资源从https://site.com/css/...加载；若部署到子路径（如https://site.com/myapp/），必须设为base: '/myapp/' - Webpack 项目确认
output.publicPath是否匹配 Nginx 的root或alias设置 - Nginx 配置里，
root /var/www/html;意味着/css/app.css必须真实落在/var/www/html/css/app.css，否则 404
src 和 href 的路径解析规则真的一样吗
完全一样。浏览器不区分语义，统一按 URL 拼接逻辑处理：/ 开头 → 域名根目录；http:// 或 https:// 开头 → 完整 URL；其余 → 基于当前 HTML 的完整 URL 路径部分拼接。
-
../不是“返回上一级文件夹”，而是字符串裁剪：从当前 HTML URL 中删掉最后一段（不含/），再拼你写的路径。例如https://a.com/blog/post.html里写src="../data.json"→https://a.com/data.json，不是https://a.com/blog/data.json -
./index.html和index.html效果完全相同，./在 HTML 中纯属冗余，无实际作用 - 模板被多个路由复用（如
/admin/users和/blog/2024）时，/js/app.js比../../js/app.js更可靠，也更少出错
大型项目该用相对路径还是 /xxx
选 /xxx，但前提是构建、部署、CDN 缓存各环节对“根目录”的理解一致。相对路径看似灵活，嵌套深了（比如 ../../../..）极易数错、改错、漏改，维护成本远高于表面看起来的“简单”。
- 真正难的不是写法本身，而是让开发、构建、Nginx、CDN 都认同一个
/指向哪——这个一致性一旦断裂，404 就会随机出现在某个环境 - 如果项目要支持多级子路径部署（如测试环境跑在
/dev/，正式环境跑在/），必须用构建工具动态注入 base，不能硬编码/ - 本地开发用相对路径“跑通”不等于线上稳定，只要没起服务器，
/xxx就是假稳定
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
