uni-app Vue 3 项目中不存在 Safari 下报错的 Vue 过滤器,因 Vue 3 已移除 Vue.filter API;报错源于残留的 Vue.filter 调用或模板中非法使用 | 语法,应改用 computed 或 method 实现格式化逻辑。

uni-app 里根本不存在能在 Safari 下“报错”的 Vue 过滤器——因为 Vue 3 已移除 Vue.filter,而 uni-app(尤其 Vue 3 项目)压根不支持全局过滤器。你看到的报错,大概率是代码里残留了 Vue.filter 调用、或在模板中错误地混用了过滤器语法,又或者把 CSS filter 属性当成了逻辑处理工具。
为什么 Safari 会报 Vue.filter is not a function
这是最典型的症状,说明你在 JS 里写了类似 Vue.filter('formatDate', ...) 的代码。Vue 3 彻底删掉了这个 API,uni-app 基于 Vue 3 构建,自然无法执行。
- uni-app 2.x(Vue 2)项目:仅限旧版,且 H5 端运行在 Safari 时仍可能因 polyfill 缺失或构建配置问题导致
Vue.filter未挂载 - uni-app 3.x(Vue 3)项目:
Vue.filter从源码里被移除,任何调用都会直接抛TypeError - 如果你用的是 vite 构建,检查是否误引入了 Vue 2 兼容插件(如
@vue/compat),它不会自动恢复filter
v-if 或事件绑定里写 {{ item.name | formatName }} 导致 Safari 白屏或编译失败
这种写法在 Safari(尤其是 iOS 16+)下容易触发模板解析异常,不是过滤器“不兼容”,而是语法非法:v-if 只接受布尔表达式,{{ }} 是渲染语法,两者不能嵌套。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- ❌ 错误示例:
<view v-if="{{ item.status | statusText === 'active' }}">→ 编译阶段就报Invalid expression - ✅ 正确做法:把映射逻辑提到计算属性或方法里,例如
v-if="item.status === 1"或v-if="isStatusActive(item.status)" - 注意:小程序平台(包括微信、支付宝)完全不支持自定义 filter,这类写法在真机上静默失效,但 Safari 会更早暴露语法问题
想在模板里复用格式化逻辑?用 computed 或 method 替代
过滤器的语义(输入→转换→输出)完全可以由 computed 或 method 更可控地实现,且 Safari、小程序、App 全端一致。
- 适合单个值、需响应式更新的场景 → 用
computed:formattedTime: computed(() => dayjs(props.time).format('YYYY-MM-DD')) - 适合带参数、多处调用、或需手动触发的场景 → 用
method:formatPrice(val) { return `¥${(val / 100).toFixed(2)}` },模板中写{{ formatPrice(item.price) }} - 避免在
computed里做副作用(如uni.showToast),也别在method里直接修改响应式数据引发无限循环
别把 CSS filter 当成数据处理工具
搜索“uni-app 过滤器 Safari 报错”时,很多人实际想处理的是 API 错误提示,却误查了 CSS filter(如 filter: blur(2px))。Safari 对 CSS filter 支持良好,但如果你写了 filter: url(#some-svg-filter) 且 SVG 定义缺失,控制台会报 Failed to load resource,和 Vue 过滤器毫无关系。
- CSS
filter是视觉效果,不能提取res.data.msg,也不能判断code === 401 - 真正该拦截 API 错误的地方是请求层:
uni.request的fail回调,或 axios 的interceptors.response.use - 统一错误处理函数里做字段兼容:
getErrorMessage(res) { return res?.data?.msg || res?.message || '网络异常' },比任何“过滤器”都可靠
真正麻烦的不是 Safari,而是你以为“过滤器还能用”——一旦在 Vue 3 项目里留着 Vue.filter 或模板中硬塞 | 语法,H5 端在 Safari 下最先崩,小程序则连 warning 都不给。删掉所有 Vue.filter 注册,把模板里的 | 全换成 method 调用,问题就没了。剩下要操心的,只是后端返回的 msg 字段到底藏在哪一层。

















