uni-app h5项目按文档打包history模式上传前端托管配置404路由后无法指定页面路径访问

开发环境	版本号	项目创建方式
Windows	win10	HBuilderX
HBuilderX	Alpha
Chrome	119.0.6045.200

操作步骤：

如上

预期结果：

按照文档能够配置history模式

实际结果：

无法使用history模式

bug描述：

h5打包history模式，发布到阿里云和腾讯云的根目录，配置了404-index.html,无法使用/pages进入指定页。但是本地编译测试是ok的。我把打包的h5编译文件上传到我自己的nginx服务器，也是ok的。

nodeper 1楼•15 天前

感谢反馈。你的意思是通过 history 打包的文件，发布到阿里云不能访问指定的路径，但是通过 nginx 配置是 ok 的？发布阿里云是用的什么服务，对象存储吗？

h691938207 2楼•15 天前

在 uni-app 的 H5 项目中，如果你使用了 history 模式，并且将项目部署到前端托管服务（如 Nginx、Apache、GitHub Pages 等），可能会遇到 404 错误，尤其是在直接访问某个特定路由时。这是因为 history 模式下，路由是由前端 JavaScript 控制的，而服务器并不知道这些路由的存在，因此当用户直接访问某个路径时，服务器会尝试查找对应的文件或目录，但找不到，从而返回 404 错误。

解决方法

1. 配置服务器重定向

为了让服务器在找不到资源时，将所有请求重定向到 index.html，你需要对服务器进行相应的配置。以下是一些常见服务器的配置方法：

Nginx

在 Nginx 的配置文件中，添加以下内容：

server {
    listen 80;
    server_name yourdomain.com;

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

try_files $uri $uri/ /index.html; 表示 Nginx 会先尝试查找请求的文件或目录，如果找不到，则返回 index.html，由前端路由处理。

Apache

在 Apache 的 .htaccess 文件中，添加以下内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

这段配置的作用是，如果请求的文件或目录不存在，则将请求重定向到 index.html。

GitHub Pages

如果你将项目部署到 GitHub Pages，可以在项目的根目录下创建一个 404.html 文件，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Redirecting...</title>
    <script>
      sessionStorage.redirect = location.pathname;
      location.replace('/');
    </script>
  </head>
  <body>
    Redirecting...
  </body>
</html>

这段代码会将用户重定向到首页，并将当前路径存储在 sessionStorage 中，前端应用可以在加载后根据 sessionStorage.redirect 的值进行路由跳转。

2. 在 uni-app 中配置 `history` 模式

在 uni-app 的 manifest.json 文件中，确保你已经启用了 history 模式：

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

uni-app h5项目按文档打包history模式上传前端托管配置404路由后 无法指定页面路径访问