uniapp 如何配置404页面实现自定义错误页

在 uniapp 里怎么配置 404 页面？我自己尝试在 pages.json 里加了 404 路径，但访问不存在的页面还是会跳转到首页，而不是显示自定义的错误页面。有没有完整的配置方法或者示例代码？

2 回复

在 pages.json 中添加以下配置：

{
  "globalStyle": {
    "navigationBarTitleText": "App",
    "enablePullDownRefresh": false
  },
  "pages": [
    // 你的页面路由
  ],
  "condition": {
    "current": -1,
    "list": []
  },
  "subPackages": [],
  "preloadRule": {},
  "tabBar": {},
  "fallback": {
    "404": "/pages/404/404"
  }
}

创建 /pages/404/404.vue 页面文件即可。


在 UniApp 中配置 404 页面（自定义错误页）主要通过以下步骤实现，适用于 H5 和部分小程序平台（如微信小程序）：

1. H5 平台配置

在 pages.json 中添加错误页路由：

{
  "pages": [
    // ... 其他页面
    {
      "path": "pages/error/404",
      "style": {
        "navigationBarTitleText": "页面不存在"
      }
    }
  ],
  "h5": {
    "devServer": { /* 开发环境配置 */ },
    "router": {
      "mode": "history",
      "base": "./",
      "errorRoute": "/pages/error/404" // 指定 404 页面路径
    }
  }
}

2. 创建 404 页面

在 pages/error/404.vue 中编写自定义内容：

<template>
  <view class="container">
    <text>页面不存在，请检查网址或返回首页</text>
    <button @click="goHome">返回首页</button>
  </view>
</template>

<script>
export default {
  methods: {
    goHome() {
      uni.reLaunch({ url: '/' }); // 跳转到首页
    }
  }
}
</script>

3. 小程序平台配置

  • 微信小程序：在 app.json 中配置（需单独编译到小程序项目）：
    {
  "pages": [
    "pages/error/404"
  ],
  "entryPagePath": "pages/index/index",
  "fallback": {
    "404": "pages/error/404" // 微信小程序 fallback 配置
  }
}
  • 其他小程序：部分平台不支持原生 404 配置，需通过路由拦截实现。

4. 路由拦截（通用方案）

在 App.vue 的 onLaunch 或全局路由守卫中监听错误：

// 在 App.vue 中
onLaunch() {
  // 监听路由失败事件（H5）
  uni.addInterceptor('navigateTo', {
    fail(err) {
      if (err.errMsg.includes('fail page not found')) {
        uni.redirectTo({ url: '/pages/error/404' });
      }
    }
  });
}

注意事项：

  • 平台差异：H5 可直接通过 router.errorRoute 配置，小程序需依赖平台支持。
  • 路径一致性：确保配置的 404 页面路径与实际文件路径匹配。
  • 测试方法：在 H5 中访问不存在的路由（如 /invalid）触发跳转。

通过以上配置，即可在 UniApp 中实现自定义 404 错误页。

回到顶部