uni-app h5端 router.base设置相对路径 ./ 同时mode设置history有问题

uni-app h5端 router.base设置相对路径 ./ 同时mode设置history有问题

示例代码：

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

操作步骤：

manifest.json文件设置：
"h5": {
"router": {
"base": "./",
"mode": "history"
},
}

然后npm run dev:h5 或 npm run build:h5

预期结果：

和配置一致是history模式

实际结果：

变成hash模式了


| 信息类别     | 信息内容                           |
|--------------|------------------------------------|
| 产品分类     | uniapp/H5                          |
| PC开发环境   | Windows                            |
| 操作系统版本 | windows10                          |
| 浏览器平台   | Chrome                             |
| 浏览器版本   | 最新版本                           |
| 项目创建方式 | CLI                                |
| CLI版本号    | ^2.0.0-31920210709003              |

更多关于uni-app h5端 router.base设置相对路径 ./ 同时mode设置history有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

https://ask.dcloud.net.cn/article/37432

更多关于uni-app h5端 router.base设置相对路径 ./ 同时mode设置history有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


路径那里不要设置相对路径如./否则会强制转换为hash模式。如果nginx设置过root根目录 直接输入/即可

在uni-app H5端，将router.base设置为相对路径./同时使用history模式确实会导致路由模式被强制降级为hash模式。这是由uni-app框架内部的路由处理机制决定的。

当base配置为相对路径时，框架会默认切换到hash模式以确保路由在不同部署环境下能正常工作。相对路径在history模式下存在路径解析的兼容性问题，特别是在静态资源部署和子目录访问时容易出错。

解决方案：

  1. 使用绝对路径：将base改为明确的绝对路径，如/my-project/
"h5": {
  "router": {
    "base": "/my-project/",
    "mode": "history"
  }
}
  1. 动态配置base：根据部署环境动态设置
// 在main.js或页面中动态配置
const base = process.env.NODE_ENV === 'production' ? '/production-path/' : '/'
  1. 保持hash模式：如果必须使用相对路径，建议保持hash模式
"h5": {
  "router": {
    "base": "./",
    "mode": "hash"
  }
}
回到顶部