标签不可被构建工具的 build.base 或 publicpath 替代，因前者控制浏览器解析相对路径的行为，后者仅影响产物中资源路径的生成；二者必须严格一致且同时配置。
为什么 Vite / Webpack 的 build.base 不能替代 <base>
构建工具的 build.base（Vite）或 publicPath（Webpack）只控制打包产物中静态资源路径的拼接逻辑，比如把 index.js 输出为 /subpath/assets/index.js；但它不改 HTML 解析行为。浏览器加载 HTML 后，仍会按当前页面 URL 解析 <script src="assets/index.js"></script> —— 如果页面在 https://example.com/subpath/page.html，而没设 <base href="/subpath/">，这个 src 就会被拼成 https://example.com/assets/index.js（404）。两者必须同时配：构建工具决定“文件放哪”，<base> 决定“浏览器去哪找”。
<base href> 的值必须和部署路径严格一致，且结尾带斜杠
写成 <base href="/subpath"> 是常见错误：Firefox 和 Opera 会截断为 /subpathcss/（把后续 css/app.css 拼成 /subpathcss/app.css）。正确写法只有三种：
-
<base href="/subpath/">（根相对路径，结尾必须有/） -
<base href="https://cdn.example.com/v2/">（绝对 URL，协议+域名+结尾/） -
<base href="//cdn.example.com/v2/">（协议相对 URL，适合多协议混用）
写 <base href="static/"> 或 <base href="../assets"> 会被浏览器静默忽略 —— 控制台无报错，但所有相对路径照旧解析，上线即 404。
SPA 路由配置和 <base> 必须双写，且值相同
Vue Router 的 base: '/subpath/' 只影响 router.push() 和历史栈，不影响 HTML 中 <script src="..."></script> 的加载；反过来，<base href="/subpath/"> 能让脚本加载成功，但不会让 router.push('/home') 自动变成 /subpath/home。漏掉任一环节都会出问题：
- 只配路由 base → JS chunk 404（找不到
/assets/index.js） - 只配
<base>→ 页面跳转后刷新 404（服务端没 fallback 到 index.html，且路由认为路径是根级） - 微前端下还可能叠加 Webpack 的
publicPath，导致路径变成/subpath/subpath/js/app.js
本地开发时慎用 <base href="/subpath/">
本地 http://localhost:5173 不含子路径，硬写 <base href="/subpath/"> 会让所有相对资源请求发到 http://localhost:5173/subpath/xxx，必然失败。建议：
- Vite 用户用
base: process.env.NODE_ENV === 'production' ? '/subpath/' : '/'，配合 HTML 模板条件注入 - Webpack 用户在 HtmlWebpackPlugin 插件中动态传入
templateParameters，模板里写<base href="<%=%20htmlWebpackPlugin.options.base%20%>"> - 绝对不要在 HTML 源码里写死
/subpath/并直接用于本地开发
真正容易被忽略的不是怎么写，而是构建产物、CDN 缓存、Service Worker 预缓存这三者是否都用了同一个前缀 —— 差一个环节，资源就加载失败，而且 Network 面板里看到的请求 URL 已经是拼接后的结果，你得倒推才知道是哪一层漏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
