HTML中base标签与路由拦截的配合方法-html教程-PHP中文网

base标签会将href="#section"解析为完整URL导致整页重载，修复需用event.preventDefault()+scrollIntoView()或配置路由basename，且fetch等相对请求也会被劫持。

html中base标签与路由拦截的配合方法

base标签会让href="#section"变成完整URL跳转

这是最常被忽略的静默故障：你写了个锚点链接，点击后页面闪一下、滚动回顶。根本不是JS没绑事件，而是让浏览器把#section2解析成/app/#section2——这个地址被当成新页面请求，触发整页重载。

浏览器不报错，Network里只看到一次/app/的HTML请求，排查时容易误判为路由未接管。

所有以#开头的href值，在有时都会被拼接进base URL
修复不是删，而是改用event.preventDefault()拦截原生行为，再调element.scrollIntoView()
若用Vue Router或React Router，确保已配置，否则仍可能跳空

router.push()和完全无关，但必须手动对齐

router.push('/home')生成的最终URL，只取决于你传给createWebHistory()或的值，和document.baseURI毫无关系。但如果你HTML里写了，而路由没配一致，就会出现“资源加载走/app/js/app.js，跳转却到/home”的割裂现象。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

Vue Router必须显式写createRouter({ history: createWebHistory('/app/'), base: '/app/' })（注意两个地方都要配）
React Router v6+ 必须用包裹根组件，否则useNavigate()和全部失效
值必须字面量完全一致：/app/ ≠ /app ≠ /APP/，结尾斜杠不能省

fetch('./api')这类请求会被意外劫持

很多人以为只影响HTML里的src/href，其实fetch()、XMLHttpRequest、new Image().src等运行时相对URL，默认也以document.baseURI为基准解析。设了后，fetch('./api/user')实际发的是https://example.com/admin/api/user，而非你预期的根路径API。

CSS里的background: url(avatar.jpg)同样受影响（但部分浏览器处理不一致）
解决办法是统一用绝对路径：fetch('/api/user')或fetch('https://api.example.com/user')
不要依赖./前缀，尤其在子路径部署场景下

Vite/Webpack构建时手写大概率引发双斜杠404

Vite的build.base或Webpack的publicPath已在打包阶段重写了所有静态资源路径（如js/app.js → /myapp/js/app.js）。此时如果HTML里再手动加，浏览器二次解析时会把已带前缀的路径再拼一次，变成/myapp//myapp/js/app.js——中间两个//导致服务端直接返回404。