base标签仅影响html中纯相对路径的href解析，如“style.css”会基于base href拼接，但根路径、绝对url及css内部路径不受影响；配置错误易致404且无明确提示。
base标签如何影响的href解析
<base> 标签会直接改写 <link rel="stylesheet"> 中相对路径的解析起点，但仅限于 href 值为纯相对路径（如 "style.css"、"css/main.css"）的情况。浏览器在 HTML 解析阶段读到 <link> 时，若其 href 不以 /、: 或协议开头，就会用 <base href="..."> 的值作为基准拼接出最终请求地址。
- 有效触发：
<base href="/app/">+<link href="css/style.css">→ 实际请求/app/css/style.css - 不触发：
<link href="/css/style.css">（根相对路径，跳过 base） - 不触发：
<link href="https://cdn.com/style.css">（绝对 URL，完全忽略 base） - 不触发：
<link href="./css/style.css">（带./的相对路径，在多数浏览器中仍受 base 影响，但语义模糊，不建议依赖）
常见错误导致 CSS 404 的三种写法
base 的 href 写错，不会报错，但所有相对 <link> 都会回退到页面 URL 解析，结果就是样式表全 404 —— 而且控制台只显示“Failed to load resource”，没提示 base 失效。
-
<base href="static/">→ 缺协议和根斜杠，被静默忽略 -
<base href="../assets/">→ 含..，被静默忽略 -
<base href="/app">→ 结尾缺/，Firefox/Opera 拼接时可能截断成/appcss/style.css
CSS 里 @import 和 background url 不受 base 控制
很多人以为加了 <base href="/app/"> 后，CSS 文件里的 @import "reset.css" 或 background: url(logo.png) 也会自动带上前缀 —— 实际上完全不会。<base> 只作用于 HTML 属性中的相对路径，CSS 内部的路径解析由 CSS 引擎独立完成，始终基于该 CSS 文件自身 URL。
-
<link href="main.css">加载成功 → main.css 里的@import "reset.css"会相对于/app/main.css解析，不是/app/reset.css - 如果 main.css 在
/app/css/main.css，那么background: url(logo.png)实际请求的是/app/css/logo.png - 想统一 CSS 资源路径，得靠构建工具（如 PostCSS 插件）或把 CSS 放在同级目录下管理
SPA 部署子路径时，base 和构建配置必须对齐
比如 Vue 应用部署在 https://example.com/myapp/，只配 <base href="/myapp/"> 是不够的：Webpack/Vite 的 publicPath 或 build.base 也得设成 /myapp/，否则 <link href="index.css"> 请求的是 /index.css（404），而不是 /myapp/index.css。
- Vite 用户：设
build.base: "/myapp/"，就别再手动写<base href="/myapp/">，否则路径重复（/myapp//myapp/index.css） - Webpack 用户：
output.publicPath: "/myapp/"必须与 HTML 中的<base href="/myapp/">一致 - 最易漏的环节：Service Worker 预缓存清单里写的路径，也要匹配这个前缀，否则离线时资源加载失败
真正麻烦的不是 base 本身，而是它只管 HTML 解析那一刻，而构建产物、CDN 路径、缓存策略、前端路由全部要和它对齐——少对一个，就出现“样式加载了但没生效”或“控制台一片 404”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
