相对路径以当前HTML文件物理位置为基准：同级写文件名，子目录用/连接（如js/main.js），上级用../逐级回溯，严格匹配层级，区分大小写，禁用反斜杠。
相对路径怎么写才不会错
相对路径的核心是“当前HTML文件在哪”，不是编辑器里看着在哪，也不是浏览器地址栏显示在哪。它只认物理存储位置。
常见错误现象：404 Not Found 但文件明明存在；图片显示为破损图标；CSS没生效，开发者工具 Network 面板里看到 style.css 状态是 failed。
-
./可省略：同目录下直接写script.js或./script.js效果一样 - 子目录用正斜杠连接：
src="js/main.js"，别写成src="js\main.js"（Windows 资源管理器显示反斜杠，但 HTML 必须用/） - 上级目录必须用
../，且数量要和目录层级严格匹配：HTML 在/pages/article.html，想引用根目录的/assets/logo.svg，就得写src="../assets/logo.svg" - 大小写敏感：Linux 服务器上
IMG.PNG和img.png是两个文件，本地 Windows 可能不报错，一上线就挂
为什么 /xxx 在本地双击打开会失效
以 / 开头的路径是「网站根路径」，不是「你电脑的 C 盘根目录」。浏览器按协议解析：
- 通过
http://localhost:8080访问时，/css/app.css指向服务器进程启动目录下的css/app.css - 双击打开 HTML 文件，地址是
file:///D:/project/index.html，此时/css/app.css会被解析为file:///css/app.css—— 即本地磁盘根目录，几乎肯定不存在 - 浏览器出于安全限制，会直接拒绝加载，并在控制台报
net::ERR_FILE_NOT_FOUND
这不是 bug，是设计如此。所以开发阶段别依赖 / 前缀做本地测试。
什么时候该用协议相对 URL（//cdn...）
只用于明确引用第三方 CDN 资源，比如 jQuery、Bootstrap、字体或图标库。它的作用是自动适配当前页面协议，避免混合内容（Mixed Content）被拦截。
- 正确写法：
src="//cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.js" - 错误写法：
src="/js/vue.global.js"（这是本地路径，不是 CDN）或src="http://cdn..."（HTTPS 页面会拦截 HTTP 资源） - 注意：现代项目更倾向用构建工具（如 Vite、Webpack）托管依赖，而非手写 CDN；若用，务必确认 CDN 域名稳定、支持 HTTPS 且版本可锁定
可以，但代价高——它会全局改变所有相对路径的基准点，容易引发隐性问题。
- 典型用法：
href="style.css"都变成请求/subdir/style.css - 风险点：JavaScript 动态创建的
img.src、fetch()地址、甚至都受其影响，调试困难 - 更稳妥的做法是统一用构建工具注入环境变量（如
VITE_PUBLIC_PATH），或服务端渲染时动态写入路径前缀
真正需要
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
