根源在于未确认当前html文件在url中的实际位置；浏览器仅依据页面完整url（如https://site.com/blog/post.html）拼接路径，与本地文件结构无关，且../表示从url路径删去最后一段再拼接。
HTML模板里引用组件时路径总错，根源在哪
根本不是路径写法本身的问题，而是没确认当前 HTML 文件在 URL 中的实际位置。浏览器解析 src 和 href 时，只看当前页面的完整 URL（比如 https://site.com/blog/post.html），然后按规则拼接——和你本地文件系统结构无关。
常见错误现象：pages/about.html 里写 <script src="js/main.js"></script>，本地双击打开时加载的是 file:///D:/project/pages/js/main.js（404）；部署后变成 https://site.com/pages/js/main.js（还是 404），因为真实路径是 /js/main.js。
- 别依赖“文件夹看起来挨着”来写路径，浏览器不读你的磁盘结构
-
../不是“返回上一级文件夹”，而是从当前 URL 路径中删掉最后一段（不含/），再拼你写的路径 - 本地双击打开时，
/js/main.js会被当成file:///js/main.js，必然失败
小项目 vs 中大型项目，路径策略必须分清
小项目（≤5 页面、无构建工具、单人维护）：所有 HTML 放根目录或 pages/ 下，资源全用纯相对路径，比如 css/main.css、../images/logo.png。这样最稳，改一个路径就能全局感知。
中大型项目（用 Vite/Webpack、有组件复用、多路由嵌套）：必须用根相对路径，比如 /components/header.html、/assets/icons/close.svg，并确保构建工具的 base 配置和服务器 root 指向一致。
- 小项目硬套
/xxx，本地开发就白屏，调试成本翻倍 - 中大型项目还用
../../js/app.js，pages/blog/2024/article.html和admin/users.html的..层数不同，维护时极易漏改 - Vite 默认
base: '/'，但若部署到子路径（如https://site.com/myapp/），就得改成base: '/myapp/'，且所有路径前缀同步更新
组件模板里的路径怎么写才不跨环境失效
组件路径是否稳定，取决于它被插入的位置。如果组件 HTML 是通过服务器端包含（SSI）、构建时注入（如 Nunjucks include）或 JS 动态加载，那它的路径基准点不是组件自身位置，而是宿主页面的 URL。
所以组件内部的资源引用（比如 template.html 里的 <img src="icon.svg">）必须用根相对路径，或由宿主页面统一提供上下文路径变量。
- 组件目录结构建议：每个组件子目录下不放独立资源，所有图片、字体统一收口到
/assets/，避免components/card/images/icon.svg这类分散路径 - 不要在组件模板里写
../assets/或../../images/，组件可能被插入任意层级的页面，..层数不可控 - 若必须动态路径，用构建时注入变量，比如 Vite 的
import.meta.env.BASE_URL，生成<img src="%24%7BBASE_URL%7D/assets/icon.svg">
CDN、public 资源和本地 assets 的路径混用陷阱
三类资源路径逻辑一致，但来源和部署方式完全不同：CDN 资源必须用完整 URL；public/ 下的资源（如 favicon.ico）构建后直接复制进 dist/ 根目录，应写 /favicon.ico；而 src/assets/ 下的资源经构建处理，路径可能被哈希重命名，必须用 import 或 new URL() 解析。
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">—— 必须带协议和域名，不能省略https:// -
<link rel="icon" href="/favicon.ico">——public/favicon.ico构建后就在dist/favicon.ico，根路径即可 -
<img :src="logoImg">在 Vue 组件里，logoImg = new URL('./logo.svg', import.meta.url).href—— 否则构建后路径失效
真正容易被忽略的是：路径解析规则虽统一，但资源是否参与构建、是否被重命名、是否走 CDN 缓存，这些环节一旦脱节，404 就不是路径写错了，而是整个链路没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
