是否生效需检查其href值是否合法且位置正确：必须以http://、https://、//或/开头且结尾带/，且唯一存在于最顶部；否则静默丢弃，导致所有纯相对路径资源按当前页URL解析而批量404。

标签本身不会报错，浏览器遇到非法 href 值（如 assets/、../static/、/myapp 缺尾斜杠）时，直接静默丢弃整条标签——控制台无提示，Network 面板里请求路径“看起来正常”，但实际全按当前页面 URL 解析，导致批量 404。

怎么快速确认 是否生效

打开开发者工具 → Elements 标签页 → 检查 最顶部是否存在 ，并确认其 href 值是否符合任一合法格式：

• /myapp/ ✅ 开头和结尾都必须是 /；写成 /myapp 会导致 Firefox/Opera 截断路径（如 css/app.css 变成 /myappcss/app.css）
• https://cdn.example.com/v3/ ✅ 绝对 URL，协议、域名、路径明确，结尾带 /
• //cdn.example.com/v3/ ✅ 协议相对，自动继承当前页 http/https
• assets/ ❌ 静默失效；%PUBLIC_URL%/ 若未被构建替换，就是字面量，同样失效

若值不合法，它就等于没写。用 Ctrl+U 查看源码，确认它是否真在 第一行、且全文仅出现一次。

放错位置或重复声明的典型表现

必须在 内、所有其他标签（包括 、、<script></script>）之前；否则它对已解析的资源完全无效：

• → main.css 已按原始页面 URL 加载完毕， 对它不起作用
• 写在 里 → 浏览器直接忽略，不警告也不报错
• SSR 模板拼接或组件内多次插入 → 只有第一个生效，Chrome 控制台会提示 Multiple base elements detected. Only the first one is used.
• 用 JS 动态创建并 appendChild() → HTML 解析阶段早已结束，完全无效

为什么资源 404 但 Network 面板里路径“看起来对”

因为 失效后，浏览器退回到按当前页面 URL 解析相对路径。例如：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 当前页面是 https://example.com/admin/dashboard
• 实际请求的是 https://example.com/admin/logo.png（不是预期的 /admin/logo.png）
• 如果静态资源部署在根路径或 CDN，这个请求必然 404
• 而 Network 面板显示的正是这个错误路径，容易误判为“路径没错”，实则是 没生效

真正受 影响的只有 HTML 属性中的纯相对路径：、<script src="app.js"></script>、、

；CSS 中的 background: url(avatar.jpg) 是由 CSS 引擎自己 resolve 的，不受影响；fetch('./api')、import('./utils') 等运行时路径也完全不受控。

SPA 部署子路径时最容易被忽略的协同点

和前端路由配置（如 Vue Router 的 base、React Router 的 basename）、构建工具配置（Webpack publicPath、Vite build.base）是三套独立机制，必须严格对齐：

• 只设 ，没配 Vue Router base: '/subpath/' → router.push('/home') 跳到根路径，白屏
• 和 Webpack publicPath: '/subpath/' 同时存在 → 资源路径被拼两次，变成 /subpath//subpath/js/app.js，404
• Service Worker 缓存策略若依赖 self.location.origin + '/subpath/'，但 HTML 没配 → 预缓存路径错位，离线失败

最稳妥的做法：优先用构建工具统一控制路径（如 Vite base: '/subpath/'），再让 HTML 中的 与之保持一致；避免手写 与构建配置值重复或冲突。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！