uni-app打包发布后全局过滤器丢失怎么办-uni-app-PHP中文网

全局过滤器仅h5有效，小程序和app端编译时直接忽略|语法，不执行vue.filter注册逻辑；跨端应改用纯函数显式调用或computed封装。

uni-app打包发布后全局过滤器丢失怎么办

全局过滤器在打包发布后“丢失”，不是打包问题，而是它压根就没在小程序和 App 端运行过——Vue.filter 仅对 H5 有效，其他端从编译阶段就跳过了管道语法 |，连注册逻辑都不执行。

为什么真机上看不到过滤器效果

小程序（微信/支付宝/字节）和 App 端不解析模板里的 {{ value | formatDate }}，也不调用你注册的 Vue.filter 函数。它们靠 JSON 数据驱动 + 自定义组件树渲染，| 语法在编译时被直接忽略，最终输出的是原始值或空字符串，且不报错、不警告。

你在 main.js 里写了 Vue.filter('formatDate', ...) → H5 正常，小程序真机调试里显示 NaN-NaN-NaN 或空白
你改了 filters 文件并重新 build → 微信开发者工具里依然没反应，控制台无任何 warning
你检查了 App.vue 的 onLaunch 里是否注册 → 其实注册位置无关紧要，因为小程序端根本不用这个机制

别再依赖 Vue.filter，改用纯函数显式调用

跨端唯一可靠的方式，是把格式化逻辑抽成独立函数，在页面中主动调用，而不是靠模板语法“自动触发”。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

在 @/utils/filters.js 中导出函数：

export const formatDate = (value, format = 'yyyy-MM-dd') => {
  if (!value) return ''
  const d = new Date(value)
  if (isNaN(d.getTime())) return ''
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  if (format === 'yyyy-MM-dd') return `${year}-${month}-${day}`
  return d.toLocaleDateString('zh-CN')
}

在页面 setup() 中导入使用：

import { formatDate } from '@/utils/filters'
// ...
const formattedDate = formatDate(props.timestamp)

金额等强格式场景，优先用 Intl.NumberFormat，避免手写千分位逻辑，兼容性更好

如果必须保留模板写法，就用 computed 封装

想少改模板？可以把过滤逻辑收进 computed，但要注意：它只对当前字段生效，不能替代全局注册，且不能带动态参数（如 {{ date | formatDate('MM/dd') }} 这种写法无法映射）。

错误示范：computed(() => this.rawDate | formatDate) → | 在 JS 中是位运算符，会报错

正确写法：

const formattedDate = computed(() => formatDate(props.date))

多个字段需分别声明 computed，或封装一个通用转换方法：normalizeItem(item) 统一处理整条数据
注意响应性：若 props.date 是异步加载的初始值为 null，computed 内部必须做 if (!value) 判断，否则 new Date(null) 返回 Invalid Date