标签不能用于隔离多版本前端框架，因其仅影响html中相对路径解析，对js动态导入、css资源、路由配置及service worker缓存等关键环节完全无效；真正有效的是构建时的publicpath/base配置与运行时沙箱机制。
<base> 标签本身不提供“多版本前端框架共存”的能力，它只是个 HTML 解析期的路径重写开关；强行用它来隔离不同框架版本，反而会引发资源加载错乱、路由跳转失效、Service Worker 缓存污染等连锁问题。
为什么<base>不能用来隔离框架版本
多版本共存（如 Vue 2 和 Vue 3 子应用并存）本质是运行时沙箱 + 资源路径隔离 + 入口 URL 分发的问题。<base> 只影响 HTML 中纯相对路径（如 src="app.js"）的解析起点，对以下关键环节完全无效：
-
import('./chunk-abc.js')、fetch('./api')等 JS 运行时路径 —— 完全绕过<base> - CSS 中的
@import "reset.css"或background: url(icon.png)（后者虽受 base 影响，但仅限于 HTML 解析阶段内联或<style></style>中的 url()，不适用于外部 CSS 文件内部的 @import） - 各框架自身的 router base 配置（如 Vue Router 的
createWebHistory('/v2/')）与<base href="/v2/">是两套独立逻辑，不会自动对齐 - 微前端容器（如 qiankun）依赖子应用的
entry地址和publicPath，而非 HTML 的<base>—— 后者若误配，只会让子应用自己的<script></script>加载失败
真正起作用的是构建时路径控制
当多个框架版本部署在不同子路径（如 /vue2-app/、/vue3-app/）时，应由构建工具统一注入路径前缀，而非靠 <base> 补救：
- Vite：设
build.base: '/vue2-app/'，生成的index.html中所有<script src="assets/index.js"></script>自动变成src="/vue2-app/assets/index.js"，无需手写<base> - Webpack：设
output.publicPath: '/vue3-app/'，同时确保html-webpack-plugin不再额外插入<base href="/vue3-app/">，避免重复拼接（如/vue3-app//vue3-app/js/app.js） - qiankun 子应用：必须导出
bootstrap/mount/unmount，且其publicPath在入口 JS 中通过__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || '/vue2-app/'动态设置 —— 这比<base>更精准、更可控
如果硬要用<base>，必须满足三个条件
极少数遗留场景下（如无法修改构建配置），需手动加 <base>，则必须同步满足：
-
<base href="/vue2-app/">必须放在最前面，且整个 HTML 中只能有一个 - 对应子应用的前端路由（Vue Router / React Router）必须显式配置
base: '/vue2-app/'，否则router.push('/home')仍跳到根路径 - 该子应用所有动态 import 的路径（如
import('./views/Home.vue')）必须写成绝对路径（import('/vue2-app/views/Home.vue')）或由插件重写 —— 否则仍按当前页面 URL 解析，404
最易被忽略的点：Service Worker 的 precacheManifest 或 workbox.injectManifest() 若基于构建时路径生成，而 HTML 又加了 <base>，会导致缓存 key（如 /vue2-app/js/app.js）和实际 fetch 请求 URL（因 base 导致浏览器发起的是 /vue2-app/vue2-app/js/app.js）不一致，离线时直接 fallback 到 network 而非 cache。这种错位不会报错，只会在 Network 面板里悄悄暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
