uniapp 网页刷新出现404问题如何解决

我在使用uniapp开发网页应用时，遇到页面刷新后出现404错误的问题。具体表现为：在本地开发环境下运行正常，但打包部署到服务器后，刷新非首页的其他页面就会返回404。我已经尝试过修改路由模式和配置nginx，但问题依然存在。请问该如何解决这个路由刷新404的问题？需要具体配置哪些服务器参数或uniapp的相关设置？

2 回复

在服务器配置中，将所有路由重定向到index.html。Nginx示例：

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

Apache需启用mod_rewrite，配置.htaccess文件。


在 UniApp 中，网页刷新出现 404 错误通常是因为路由模式配置或服务器设置问题。以下是解决方案：

1. 配置路由模式为 hash 模式

在 src/main.js 或项目配置中，将路由模式设置为 hash，避免路径解析问题：

const router = new VueRouter({
  mode: 'hash', // 使用 hash 模式
  routes
})

2. 服务器配置（部署时关键）

如果使用 History 模式，需配置服务器支持：

  • Nginx：添加 try_files 指令：
    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]

3. 检查 UniApp 打包配置

在 manifest.json 中确认 Web 配置：

{
  "h5": {
    "router": {
      "mode": "hash" // 或 "history" 需配合服务器配置
    }
  }
}

4. 本地开发调试

使用 hbuilderx 内置服务器或配置静态服务器，确保路径重定向到 index.html。

总结

  • 优先使用 hash 模式 避免 404。
  • 若需 History 模式，务必配置服务器支持。
  • 测试时从服务器根路径访问（如 http://domain.com/）。

按以上步骤操作即可解决刷新 404 问题。

回到顶部