<base>标签在多语言部署中是高风险操作，仅机械拼接相对URL前缀；必须用带尾斜杠的根相对路径（如"/en/"），否则Firefox等会截断导致404；它不影响fetch等运行时请求，但影响CSS url()和HTML属性中的纯相对路径，且需与前端路由、构建配置严格对齐。
<base> 标签在多语言部署中不是“妙用”，而是高风险操作——它不感知语言、不解析路径语义，只做机械的相对 URL 前缀拼接。误用会直接导致 img、script、link 全部 404，且浏览器静默忽略、毫无提示。
多语言子路径下 base href 必须带尾部斜杠
比如站点支持 https://example.com/en/ 和 https://example.com/zh/，你不能写 <base href="/en"> 或 <base href="/zh">。
Firefox 和 Opera 会把 /en + css/app.css 拼成 /encss/app.css（中间缺 /），结果 404。
- ✅ 正确：
<base href="/en/">、<base href="/zh/"> - ❌ 错误：
<base href="/en">、<base href="en/">（缺/开头）、<base href="../en/">（含..）
base 不影响 JS 动态请求，但会影响 CSS url() —— 这点常被忽略
你在 en/ 目录下放了 style.css，里面写了 background: url(avatar.jpg)，这个 avatar.jpg 会被 <base href="/en/"> 重写为 /en/avatar.jpg；但 JS 里写的 fetch('./api/user') 仍按当前页面 URL 解析，即 https://example.com/en/api/user。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 受控：所有 HTML 属性中的纯相对路径（
src="i/logo.png"）、CSS 中的url() - 不受控：
fetch()、import()、@import、new Worker()、<iframe src>
与前端路由、构建工具协同时，base 是“半截路”
<base href="/zh/"> 只管 HTML 静态资源加载，不管 Vue Router 的导航逻辑。如果你没同步配置 createRouter({ base: '/zh/' })，router.push('/home') 会跳到 https://example.com/home，而不是 /zh/home。
- Vite 构建设了
build.base: '/zh/'，就不要再手动写<base href="/zh/">，否则资源路径变成/zh//zh/js/app.js - Webpack 的
publicPath和<base href>值重复，也会双拼前缀 - Service Worker 缓存预加载路径若写死
self.location.origin + '/zh/'，而 HTML 没配<base>，缓存和实际加载路径就错位
最易被忽略的一点：本地开发时，<base href="http://localhost:5173/zh/"> 比 <base href="/zh/"> 更安全——它避免了后端代理规则把 /zh/js/app.js 错误转发到根路由，也绕开了浏览器对根相对路径的跨环境歧义解析。
