小程序not 404

在 uni-app 的 H5 项目中,出现 Failed to load resource: 404 (Not Found) 报错,通常分为两种情况。你可以对照以下场景来排查:

场景一:页面刷新后,整个页面报 404(最常见)

如果你能通过点击按钮正常跳转页面,但一按浏览器刷新按钮(或直接输入某个子页面的 URL 访问)就出现 404,这是因为 uni-app 的 H5 默认使用了 history 路由模式。服务器找不到对应的物理文件路径,所以返回了 404。

解决方法:配置服务器的路由回退(Fallback)

你需要告诉服务器:当找不到对应的文件时,统一返回 index.html,让前端路由来接管页面渲染。

  • 如果你使用的是 Nginx 服务器
    在 Nginx 的配置文件(nginx.conf 或站点配置)中,找到对应的 location / 块,添加或修改为以下配置:

    复制代码
    location / {
        try_files $uri $uri/ /index.html;
    }
  • 如果你使用的是 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>
  • 如果你使用的是云存储(如阿里云 OSS、腾讯云 COS)
    需要在静态网站托管的设置中,将"默认首页"和"默认404页"都设置为 index.html


场景二:页面空白,控制台提示 JS/CSS/图片等静态资源 404

如果页面打开是空白的,且控制台报错的路径是类似 https://你的域名/static/js/app.js 找不到,这说明静态资源的路径配置错了 。通常是因为你把项目部署在了服务器的子目录(如 https://example.com/myapp/),但 uni-app 默认会去根目录 / 找资源。

解决方法:修改 manifest.json 中的 H5 配置

  1. 打开项目根目录下的 manifest.json 文件。

  2. 找到 h5 配置项,修改 publicPath 和路由的 base

  3. 最简单通用的改法是将其设置为相对路径 ./

    "h5": {
    "publicPath": "./",
    "router": {
    "mode": "history",
    "base": "./"
    }
    }

(注:如果你明确知道部署的子目录是 /myapp/,也可以将上面两个值都改为 "/myapp/",但记得末尾的斜杠要一致。)

修改完成后,一定要重新执行 H5 打包(npm run build:h5 或在 HBuilderX 中重新发行),并将打包后的 dist 目录重新上传到服务器


💡 避坑小贴士

  • 本地开发没问题,上线就 404? 这是因为本地开发服务器(如 webpack-dev-server)自带了路由回退功能,而线上的 Nginx/Apache 没有配置。
  • 修改配置后记得清缓存:如果你使用了 CDN 或浏览器有强缓存,修改配置重新部署后,建议清除一下 CDN 缓存或使用浏览器的"无痕模式"测试,避免旧的 404 状态被缓存。

你可以先判断一下是页面路径 404 还是 静态资源(js/css)404,然后按对应的方法去调整。如果还有报错细节,随时发给我!

相关推荐
小码哥06834 分钟前
从三甲综合医院到连锁诊所:医院管理小程序的场景化突围逻辑(陪诊系统-陪诊APP-陪诊小程序)
小程序·医院管理系统·陪诊小程序·陪诊系统·陪诊app
2501_916007471 小时前
iOS和macOS应用程序性能分析和优化工具使用综合指南
android·macos·ios·小程序·uni-app·iphone·webview
正在走向自律3 小时前
用豆包Seed Evolving打造全功能【AI智能记账】小程序,开源可落地
人工智能·小程序·开源·智能记账
小羊Yveesss1 天前
模板建站哪个平台好?模板数量之外还要比较编辑与SEO能力
大数据·人工智能·小程序
2501_916007471 天前
深入理解HTTPS对称与非对称加密机制及Charles抓包实践
网络协议·http·ios·小程序·https·uni-app·iphone
郑州光合科技余经理1 天前
家政O2O平台解析:从0搭建上门预约小程序解决方案
android·java·开发语言·前端·小程序·架构·php
维双云1 天前
小程序商城制作一个需要多少钱?2026报价明细与成本拆解
小程序
郑州光合科技余经理1 天前
家政预约小程序后端源码深度剖析:支付回调实战
java·开发语言·前端·git·小程序·架构·php
电商API_180079052471 天前
导购比价小程序场景|京东联盟商品详情对接方案|多规格图文拉取技术实操
网络·小程序·网络爬虫
北极糊的狐1 天前
钉钉小程序 Git 版本管理完整流程
git·小程序·钉钉