协议相对路径（//）安全但有局限：仅适用于cdn自动适配http/https；不支持本地file://、老旧代理可能失败；与spa路由base必须一致，否则导致跳转错位；推荐交由构建工具统一配置。
base href 用 // 开头的协议相对路径是否安全
安全，但只在明确需要自动适配 http/https 的 CDN 场景下才推荐。浏览器会把 //cdn.example.com/v2/ 中的 // 替换为当前页面使用的协议（http: 或 https:），再拼接后续路径。
这种写法能避免硬编码协议导致的混合内容警告，但有三个实际限制：
-
//后必须跟域名（不能是//assets/或//../static/），否则整条<base>被静默忽略 - 本地开发用
file://协议时，//无法解析，资源全部 404，调试阶段必须换绝对 URL 或根相对路径 - 部分老旧代理或内网环境可能不识别协议相对 URL，导致请求失败且无提示
相对协议路径 + SPA 部署时的 base 不一致风险
Vue Router 或 React Router v6+ 完全不读取 document.baseURI，它们依赖自己配置的 base 参数。如果你 HTML 里写 <base href="//cdn.example.com/app/">，但 Vue Router 初始化时传的是 { base: '/app/' }，就会出现两套基准：
-
<img src="logo.png">拼成https://cdn.example.com/app/logo.png -
router.push('/home')跳到https://example.com/home（不是/app/home）
结果是页面能加载，但路由跳转错位、useRoute().fullPath 返回值异常、<link> 渲染出的 href 也不对。必须让两者严格一致：<base href="/app/"> 对应 createRouter({ base: '/app/' })。
相对协议路径在构建工具中的等效替代方案
Webpack 的 publicPath 和 Vite 的 base 配置项，本质就是帮你生成合法的 <base href="...">。直接写 //cdn.example.com/app/ 很容易漏掉结尾斜杠，或在不同环境（dev/prod）中混用。
更稳妥的做法是交给构建工具统一控制：
- Vite：在
vite.config.ts中设base: '//cdn.example.com/app/'，它会自动注入到 HTML 并确保结尾斜杠 - Webpack：设
output.publicPath: '//cdn.example.com/app/'，配合HtmlWebpackPlugin自动写入<base> - 禁止同时手写
<base>和构建工具配置——会导致路径被拼两次，比如//cdn.example.com/app//js/app.js
如何验证相对协议路径是否真正生效
不能只看 document.baseURI 返回值，那只是字符串；关键要确认资源是否按预期加载。最直接的验证方式是打开开发者工具的 Network 面板，刷新页面后检查几个典型请求：
-
<script src="app.js"></script>发出的请求 URL 是否以https://cdn.example.com/app/或http://cdn.example.com/app/开头 -
<img src="icon.svg">的请求是否 404，如果是，立刻检查<base>是否被放在了<title></title>之后（位置错误） - 执行
new URL('data.json', document.baseURI)，返回值是否符合预期——这是唯一能稳定复用<base>值的 JS 场景
最容易被忽略的是：相对协议路径只影响 HTML 解析阶段的纯相对路径，fetch('./api') 和 CSS 中的 @import 完全不受控，别指望它能“一揽子解决所有路径问题”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
