uni_modules中无法直接使用vue.filter,因其js文件不会被自动执行;需在main.js中手动import并注册,且过滤器必须是纯函数、不可访问this或平台api。

uni_modules 里写 Vue.filter 不起作用
在 uni_modules 目录下新建的插件(如 uni_modules/my-filter)中直接调用 Vue.filter,对任何端都无效。原因很直接:uni-app 的插件加载机制不执行插件目录下的 JS 入口逻辑,Vue.filter 必须在主项目 main.js 执行阶段注册,而 uni_modules 中的 JS 文件默认不会被自动 import 或执行。
想复用过滤器逻辑,必须手动 import + 显式注册
真正可行的做法是把过滤器函数定义在 uni_modules/my-filter/filter.js 里,但不能依赖“插件自动生效”——它只是个普通 JS 模块,需要你主动引入并注册:
- 在
uni_modules/my-filter/filter.js中导出纯函数,例如:export const formatDate = (value, format = 'yyyy-MM-dd') => { /* ... */ } - 在主项目
main.js开头 import 并注册:import { formatDate } from '@/uni_modules/my-filter/filter.js'Vue.filter('formatDate', formatDate) - 确保
Vue.filter调用在new Vue({})之前,否则 H5 端也看不到效果
别在 filter 函数里访问 this、uni 或平台 API
过滤器运行时没有组件上下文,this 是 undefined,uni 对象未注入,uni.getSystemInfoSync() 会报错或返回空对象。常见错误包括:
- 在
filter.js里直接调用uni.requireNativePlugin—— 返回null或undefined,且无法重试 - 用
document或localStorage—— 小程序端不存在这些 API - 试图读取
this.$t做国际化 —— 过滤器里拿不到 i18n 实例
所有逻辑必须是纯函数:只依赖输入参数,不产生副作用,不依赖运行时环境。
跨端一致性比“放哪”更重要
很多人纠结“能不能让 uni_modules 自动注册”,其实问题不在路径,而在机制:uni-app 的过滤器本就是 Vue 2 的 template 编译产物,只在 H5 生效;小程序和 App 端压根不解析 | 语法。所以即使你绕过限制让它“注册成功”,在微信开发者工具里依然显示原样字符串,不报错也不执行。
真正要守住的底线是:别把格式化、状态映射这类逻辑锁死在过滤器里。用 computed 或工具函数封装,模板里显式调用 {{ formatTime(item.time) }},反而更可控、可调试、跨端一致。










