直接刷新页面404主因是history模式与服务器路径不匹配:前端路由请求深层路径时,服务器未将请求回退至index.html;解决方案为切换hash模式或配置服务器try_files规则。

直接刷新页面出现 404,基本就是前端路由和服务器路径没对上。核心就两条路:改前端路由模式,或配服务器回退规则——选哪个,取决于你能不能改服务器配置。
uni-app 的 history 模式为什么一刷就 404
因为 history 模式生成的 URL(比如 /user/profile)是纯路径,不带 #。但 Nginx/Apache 这类静态服务器默认只认真实存在的文件或目录。它看到 /user/profile,就去查有没有这个路径下的 index.html 或文件,找不到就直接返回 404,根本不会把请求交给前端的 index.html 去处理。
本质不是 uni-app 的 bug,而是 SPA 路由和传统服务器行为的天然冲突。
- 只有首次访问根路径
/才能正常加载index.html - 后续跳转靠 JS 控制,不触发服务器请求
- 但手动刷新或直接输入深层路径,就会绕过 JS,直连服务器
改 manifest.json 切到 hash 模式最省事
如果你无法修改服务器(比如用的是某些静态托管平台、公司运维不配合、或者只是本地测试),直接切 hash 是最快见效的方案。
在 manifest.json 的 h5 节点里加:
{
"h5": {
"router": {
"mode": "hash"
}
}
}
改完必须重新运行 H5(关掉当前浏览器窗口,再点「运行到浏览器」),否则缓存会掩盖效果。
- URL 变成
https://example.com/#/pages/user/profile,#后面的部分由前端接管,服务器完全不参与 - 不用动任何服务器配置,适合快速验证或临时部署
- 注意:微信内嵌浏览器对
hashchange有兼容性问题,部分旧版本可能触发两次路由
Nginx 配置 try_files 让 history 模式真正可用
能改服务器时,优先配 Nginx。这不是“可选优化”,而是 history 模式的必要前提。
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景,三层路由架构(触发词→SAD反馈→DAG编排),recall@10=96.97%。配置驱动(chains.yaml),零代码扩展。pip install skill-weave-chains 一键安装。
关键配置只有一行,加在对应 location 块里:
location / {
try_files $uri $uri/ /index.html;
}
如果 uni-app 不在根目录(比如部署在 /h5 或 /app1 下),要严格匹配路径前缀:
location /h5 {
alias /www/wwwroot/my-site/h5/;
try_files $uri $uri/ /h5/index.html;
}
-
alias和root别混用:alias会替换整个路径,root是拼接,写错会导致资源 404 - 确保
/h5/index.html真实存在,且构建产物已正确输出到该目录 - 改完 Nginx 配置后必须
nginx -t && nginx -s reload,光重启服务不够
子目录部署时 publicPath 和 base 必须同步对齐
比如项目实际部署在 https://example.com/myapp/,但你没告诉 uni-app,它就会按根路径打包资源,导致 JS/CSS 请求全部 404。
两个地方必须一致:
-
manifest.json中设置"h5": {"publicPath": "/myapp/"} -
manifest.json中设置"h5": {"router": {"base": "/myapp/"}}
漏掉任意一个,都会出现:页面能打开,但样式丢失、接口 404、图片加载失败——这些都不是路由问题,而是资源定位错了。
最容易被忽略的是:publicPath 结尾必须带斜杠,base 开头必须带斜杠,且两者值要完全相同。


















