uni-app h5下使用history路由模式时 若配置了base: "./" 则history模式无效变成hash模式

uni-app h5下使用history路由模式时 若配置了base: “./” 则history模式无效变成hash模式

操作步骤：

配置manifest.json中

"h5": {
"router": {
"mode": "history",
"base": "./"
}
}

预期结果：

路由模式为history


## 实际结果：

路由模式为hash

bug描述：

h5下使用history路由模式，如果配置了base: "./"则history模式无效变成hash模式


![image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20210923/aeae326b621e3d5879649f1aa67ffeba.png)

| 项目         | 值               |
|--------------|------------------|
| 产品分类     | uniapp/H5        |
| PC开发环境   | Windows          |
| PC开发环境版本 | Windows 10 家庭中文版 20H2 |
| 浏览器平台   | Chrome           |
| 浏览器版本   | 93.0.4577.82     |
| 项目创建方式 | CLI              |
| CLI版本号    | 4.5.7            |

更多关于uni-app h5下使用history路由模式时 若配置了base: "./" 则history模式无效变成hash模式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

非 bug，设计如此
因为history无法支持base相对路径（无法推测实际的部署路径）

更多关于uni-app h5下使用history路由模式时 若配置了base: "./" 则history模式无效变成hash模式的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢，还是希望支持下

回复 qw572386: 从理论上无法支撑，这两处配置相悖。

这是一个已知的配置冲突问题。当在 manifest.json 的 h5.router 中同时设置 "mode": "history" 和 "base": "./" 时，base 的 "./" 相对路径配置会导致路由模式被强制回退到 hash 模式。

原因分析： base: "./" 表示路由的基准路径为当前目录的相对路径。在 History 模式下，这通常用于部署在非根目录（如子路径）的场景。然而，在 uni-app 的 H5 平台实现中，当检测到 base 被设置为相对路径 "./" 时，框架内部可能出于兼容性或路径解析的考虑，自动将路由模式切换为 hash 模式，以确保路由在不同环境下能正确工作。这可能是框架的一个默认降级行为。

解决方案：

  1. 明确指定绝对路径的 base：如果您的应用需要部署在子路径下，请将 base 设置为明确的绝对路径，而不是相对路径 "./"。例如，如果应用部署在 https://yourdomain.com/myapp/ 下，则 base 应配置为 "/myapp/"。
    "h5": {
  "router": {
    "mode": "history",
    "base": "/myapp/"
  }
}
  2. 检查部署环境：如果应用部署在网站根目录，则无需配置 base 或将其设置为 "/"（默认值）。移除 base: "./" 配置即可。
    "h5": {
  "router": {
    "mode": "history"
  }
}
回到顶部