解决因前端路由模式导致页面刷新404问题
本文总结了在使用 UniApp 开发的 H5 项目中,刷新页面出现 404 错误的问题及解决方案。
**问题现象:** UniApp H5 项目部署后,首次访问页面正常,但刷新页面出现 404 错误。
**问题原因:** 由于 UniApp 使用 History 模式路由,刷新时服务器尝试访问不存在的物理文件。
**解决方案:** 修改 Nginx/OpenResty 配置,添加以下代码:
```nginx
location / {
try_files $uri $uri/ /index.html;
}
```
**原理:** `try_files` 指令依次尝试访问请求的 URI、作为目录的 URI,如果都不存在则返回 `/index.html`,由前端路由接管 URL 解析。
**注意事项:** 修改配置后需重启 Nginx/OpenResty 使配置生效。