uni-app如何在H5端调试过滤器报错

作者：袖梨 2026-08-07

H5端过滤器错误默认静默不报，需关闭生产模式、启用Vue调试模式，并将{{value|filter}}改为{{filter(value)}}强制暴露错误。

不是过滤器本身被屏蔽，而是 H5 端运行时 Vue 的模板编译错误（比如 v-for 中用了未定义的变量、{{ }} 里调用不存在的过滤器）默认不抛出可捕获异常，只静默失败或渲染为空，且 HBuilderX 或浏览器 DevTools 不会主动标记这类错误。

常见现象包括：filter not found 错误完全不出现、页面某处空白、{{ item | formatTime }} 渲染成原始时间戳甚至 undefined，但 console 里没报错。

确保过滤器已正确注册：全局注册用 Vue.filter('formatTime', ...)（Vue2）或 app.config.globalProperties.$filters.formatTime = ...（Vue3 + @dcloudio/[email protected]）
局部过滤器必须写在组件的 filters 选项里（Vue2）或 setup() 中通过 defineProps + computed 模拟（Vue3 不再原生支持局部 filters）
H5 端使用 Vue3 时，{{ value | myFilter }} 语法已被移除，必须改写为 {{ myFilter(value) }} 或用 computed 封装
检查是否在 manifest.json → H5 → 运行基础路径 填了错误的 http://localhost 导致资源加载失败，间接导致过滤器 JS 没执行

靠肉眼排查太慢，得让错误浮到表面。核心是关闭 H5 的“生产模式”并启用 Vue 的严格模式。

在 vue.config.js 或 vite.config.ts 中确保 mode: 'development'，且未设置 process.env.NODE_ENV = 'production'
在 main.js 或 main.ts 初始化前加：Vue.config.devtools = true（Vue2）或 app.config.productionTip = false（Vue3）
在模板中临时把 {{ data | unknownFilter }} 改成 {{ unknownFilter(data) }}，这样 JS 执行时报错会直接出现在 console，而不是模板编译阶段静默忽略
如果用的是 Vue3 + Composition API，过滤器应转为普通函数导入使用，例如：import { formatTime } from '@/utils/filters'，然后 {{ formatTime(item.time) }}

根本原因是平台底层差异：小程序编译器会预检模板语法并提示 filter xxx is not defined，而 H5 端走的是标准 Vue 运行时，且 uni-app 对 Vue3 的模板解析做了兼容层，部分错误被吞掉或延迟触发。

Vue2 项目中，若同时跑 H5 和小程序，注意 filters 选项在 H5 端可能因组件未正确挂载而未注册（尤其在 onLoad 之后动态注册）
Vue3 项目中，[email protected] 默认启用 Vue3 模板语法，但 H5 端仍保留部分 Vue2 兼容逻辑，导致过滤器行为不一致——最稳妥做法是彻底弃用 | 语法，统一用函数调用
检查是否启用了 uni-app 的 H5 优化开关（如 optimization.subNVue），某些配置会跳过模板校验

手机浏览器没有 DevTools，但你可以把错误“打出来”。这不是权宜之计，而是线上环境也该做的兜底。

封装一个安全调用函数：const safeFilter = (fn, value) => { try { return fn(value) } catch (e) { console.error('Filter error:', e); return value } }
在页面顶部加一段调试开关：if (process.env.NODE_ENV === 'development') { window.onerror = (msg, url, line) => console.log('[H5 Filter Debug]', msg) }
用 uni.showModal 弹窗捕获关键错误（仅开发阶段）：try { result = formatTime(data) } catch (e) { uni.showModal({ content: e.message }) }
别依赖 console.log —— iOS Safari 会丢掉部分日志，改用 uni.showToast 或往页面插入 <div id="debug-log"></div> 实时追加文本