绝大多数情况下应使用相对路径，因其部署灵活、避免子路径404；绝对路径（如/css/main.css）在非根目录部署时会失效；路径需严格匹配大小写，避免中文、空格及file://协议路径。
内部链接路径写相对还是绝对？
绝大多数情况下，用相对路径更安全、更可控。绝对路径（比如 /css/main.css）看似方便，但一旦项目没部署在域名根目录下（例如放在 https://example.com/myapp/），所有以 / 开头的路径就会 404。
- 推荐写法：
./css/style.css（同级目录下的 css 文件夹）、../js/app.js（上级目录的 js 文件） - 避免写死操作系统路径，如
C:\project\img\logo.png或/Users/name/project/index.html—— 浏览器不认file://协议下的这种路径，会直接报错net::ERR_FILE_NOT_FOUND - 大小写必须严格匹配：Linux/macOS 服务器区分大小写，
style.CSS和style.css是两个文件
为什么和<script>的路径出错时页面不报红但样式/逻辑失效？</script>
浏览器对资源加载失败默认静默处理：CSS 加载失败，就用浏览器默认样式；JS 加载失败，脚本不执行，但不会中断 HTML 解析或抛出明显错误。你看到的是“样式没了”或“按钮点不动”，Network 面板里却只显示一个 404 的灰色请求。
- 检查方式：打开 Chrome DevTools → Network 标签页，刷新页面，筛选
css或js，看是否有状态码为404或Failed的条目 - 常见诱因：
href或src值开头多了一个空格、少了一个点（./写成/）、路径中用了中文或特殊符号（如我的样式.css） - 构建工具（如 Vite/Webpack）能自动解析并校验路径，但 raw HTML 中全靠手写，建议用 VS Code 的 Path Intellisense 插件辅助补全
怎么让路径在开发和上线环境都跑得通？
根本解法不是靠路径“猜对”，而是统一用本地开发服务器启动页面。直接双击打开 index.html 会走 file:// 协议，触发跨域限制、禁止某些 fetch、预加载失效，且相对路径行为不稳定。
- 最简启动方式：
npx http-server（需先npm install -g http-server），然后访问http://localhost:8080 - 此时所有相对路径都按 HTTP 协议解析，
./img/logo.png就真指向同目录下的图片，不会因双击打开而失效 - 若用构建工具（如 Vite），直接运行
vite，它内置服务器且自动处理路径别名（如@/assets/logo.png），但最终输出仍是标准相对路径
路径设置不当会拖慢加载吗？
路径本身不耗时，但写错会导致额外 300–500ms 的 404 请求等待，还可能触发浏览器重试逻辑；更严重的是，错误路径让关键 CSS/JS 加载失败，间接导致 FOUC（闪白屏）或交互不可用——这比慢一点更致命。
- 不要为了“省事”在
里用@import url("wrong-path.css")：它不仅路径错会失败，还会阻塞后续所有 CSS 解析 - 避免在 JS 中拼接路径：
const url = "./data/" + id + ".json"—— 万一id含非法字符或路径穿越（../etc/passwd），既不安全又难调试 - 静态资源路径尽量扁平化：把
./assets/css/、./assets/js/、./assets/img/都放同一级，减少../层数，降低出错概率
路径问题从来不是“小问题”。它不报错、不崩溃，但会让优化白做——比如你内联了关键 CSS，结果因为路径写错，浏览器根本没加载那个文件，首屏照样白屏两秒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
