uniapp打包h5改为history后还是有#是什么原因

在uniapp项目中，我已经将打包H5的路由模式设置为history，但在浏览器中访问时URL仍然带有#号。请问这是什么原因导致的？需要检查哪些配置或进行哪些额外操作才能完全去除#号？

2 回复

可能是路由配置问题。检查pages.json中是否设置了"mode": "history"，同时确保服务器支持history模式，否则会回退到hash模式。


在UniApp打包H5时，即使将路由模式设置为history，URL中仍出现#，通常由以下原因导致：

  1. 配置未生效
    检查manifest.json中是否正确配置了h5选项：

    "h5": {
  "router": {
    "mode": "history"
  }
}

    注意：修改后需重新打包才能生效。

  2. 运行环境未更新
    开发环境下，修改配置后需重启开发服务器（关闭并重新运行 npm run dev:h5）。

  3. 部署服务器未支持History模式
    History模式需要服务器端配置支持，否则刷新页面会出现404。
    解决方案（以Nginx为例）：

    location / {
  try_files $uri $uri/ /index.html;
}

  4. 静态资源路径问题
    若部署在子路径（如/app/），需同步配置publicPath：

    "h5": {
  "publicPath": "/app/",
  "router": {
    "mode": "history"
  }
}

排查步骤：

  1. 确认配置已保存并重新打包；
  2. 检查浏览器访问的URL是否为正式部署地址；
  3. 通过F12网络面板查看是否存在资源加载错误。

若问题持续存在，可尝试清除项目缓存（删除unpackage、node_modules后重新安装依赖）。

回到顶部