Vue.js中使用moment处理时间返回错误小时数该如何解决

• 最核心的诱因是时区不匹配：你传入formatDate的时间参数默认是UTC标准时间，而moment默认会按当前运行设备的本地时区解析时间，两地时区差刚好为5小时的情况下，就会出现刚创建的内容显示为5小时前的问题。
• 小概率是时间参数单位错误：如果传入的是秒级Unix时间戳，moment默认按毫秒级时间戳解析，也会出现时间偏差，但这种情况偏差通常远大于5小时，可以优先排查时区问题。

方案1：UTC时间转本地时区后计算相对时间 #

如果确认传入的时间是UTC标准时间，调整解析逻辑即可：

formatDate(date) {
  // 先按UTC规则解析传入时间，再转换为当前设备本地时区计算相对时间
  return moment.utc(date).local().fromNow();
}

方案2：全局固定时区 #

如果需要全项目统一时区，不随设备时区变化，可以安装moment-timezone依赖后全局指定时区，比如固定使用东八区：

// 项目入口文件（main.js）中全局配置
import moment from 'moment-timezone'
moment.tz.setDefault('Asia/Shanghai')

// 组件中的方法不需要改动
formatDate(date) {
  return moment(date).fromNow();
}

方案3：时间戳单位适配 #

如果排查后发现是传入的时间为秒级时间戳，调整单位即可：

formatDate(date) {
  // 秒级时间戳转换为moment支持的毫秒级
  return moment(Number(date) * 1000).fromNow();
}

内容的提问来源于stack exchange，提问作者shazim ali