使用Moment.js转换Date.now生成的时间戳失效该如何解决？

核心原因定位 #

渲染时输出原始时间戳，说明你写的moment过滤器根本没有被触发执行，优先从框架语法、过滤器注册逻辑两个方向排查：

1. 首先确认你使用的Vue版本 #

如果你使用的是Vue 3.x，这是最常见的原因：Vue 3已经正式移除了过滤器（|）语法，模板内的|不会被识别为过滤器调用，直接输出原始值。

修复方案

把过滤器改为全局挂载方法调用：

// 全局注册（main.js中）
import moment from 'moment'
const app = createApp(App)
app.config.globalProperties.$formatTime = (time) => {
  if (!time) return ''
  return moment(Number(time)).fromNow()
}

模板内修改为方法调用：

<p class="text-muted small mb-0">
     {{ $formatTime(comments.postedAt) }}
</p>

2. 如果你使用的是Vue 2.x，排查过滤器注册逻辑 #

• 你当前写的是局部过滤器，只能在当前注册的组件模板内使用，跨组件调用会失效。如果需要全局使用，改为全局过滤器注册：

// main.js中全局注册
import moment from 'moment'
Vue.filter('moment', function(postedAt) {
  if (!postedAt) return ''
  // 强制转为数值，避免数据库取出的时间戳是字符串格式导致Moment解析失败
  return moment(Number(postedAt)).fromNow()
})

• 确认你已经正确安装并引入Moment.js依赖，在过滤器内打印console.log(moment)如果输出undefined，说明依赖引入失败，先执行npm install moment安装后再引入使用。
• 确认模板内变量正确：如果comments是评论列表数组，你需要在v-for循环中取单条评论的postedAt，直接写comments.postedAt会取不到值。

内容的提问来源于stack exchange，提问作者Jan Tuđan