uniapp修改history后无法直接访问/pages/bill导致404如何解决？

在uniapp中修改history模式后，直接访问/pages/bill页面会出现404错误，该如何解决？我已经尝试配置nginx的try_files但依然无效，请问是否需要额外的路由配置或服务器设置？

2 回复

在manifest.json的h5配置中添加history模式fallback为首页，或使用hash模式。


在UniApp中，修改路由模式为history后，直接访问/pages/bill等具体路径会导致404错误，这是因为服务器没有配置相应的路由重定向。以下是解决方案：

1. 服务器配置重定向

需要在服务器配置中将所有非静态资源请求重定向到index.html，让UniApp前端路由接管。

示例（Nginx）：

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

示例（Apache）： 在项目根目录创建.htaccess文件：

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

2. UniApp配置检查

确保pages.json中的路由路径正确：

{
    "pages": [
        {
            "path": "pages/bill/bill",
            "style": { ... }
        }
    ]
}

路径应为pages/bill/bill（根据实际文件结构调整）。

3. 部署注意事项

  • 如果使用静态托管服务（如GitHub Pages、Vercel），需参考其SPA配置文档启用路由支持。
  • 本地开发时，HBuilderX内置服务器已处理此问题，无需额外配置。

4. 回退方案

若不支持服务器配置，可切换回hash模式（在manifest.json中设置"router": {"mode": "hash"}），但URL会包含#。

通过以上步骤，直接访问/pages/bill即可正常加载页面。

回到顶部