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

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

uni-app H5端过滤器报错不显示在控制台？

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

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

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

怎么让 H5 过滤器错误强制暴露？

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

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

为什么小程序正常、H5 报过滤器错？

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

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

真机 H5 调试看不到过滤器报错怎么办？

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

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

过滤器错误最难缠的地方不在语法，而在它混在模板里，既不打断点也不进 call stack。你得把它从模板里“拽出来”，变成可调试的 JS 函数，再配好环境开关，否则真机一跑就失联。