如何在Pug中使用moment.js？渲染时提示实例上未定义moment属性或方法

问题根本原因 #

Vue 模板的默认作用域只能访问当前 Vue 实例上暴露的属性，你通过 script 标签引入的 MomentJs 是挂载在全局 window 对象上的，无法直接在模板插值语法中调用。

可行解决方法 #

方法1：全局挂载Moment（推荐，全项目通用） #

在你引入Vue和Moment的script之后、实例化Vue根实例之前，添加如下代码，将Moment挂载到Vue原型上，所有组件都可以直接访问：

Vue.prototype.moment = window.moment

挂载完成后你原有模板代码不需要任何修改即可正常运行。

方法2：单组件内挂载（仅当前组件使用） #

如果不需要全项目通用，可以在当前组件的data选项中暴露moment：

new Vue({
  // 其他组件配置
  data() {
    return {
      moment: window.moment,
      // 其他业务数据
    }
  }
})

方法3：封装为日期过滤器（更符合Vue最佳实践） #

如果项目中多处需要日期格式化，推荐封装为全局过滤器，复用性更强：

// 全局注册日期格式化过滤器
Vue.filter('formatDate', (value, pattern = 'DD MMMM YYYY') => {
  if (!value) return ''
  return window.moment(value).format(pattern)
})

封装后你的Pug模板可以改写为更简洁的写法：

div {{ currentEvent.date | formatDate }}
// 需要自定义格式时也可以传参
// div {{ currentEvent.date | formatDate('YYYY-MM-DD') }}

检查确认项 #

如果配置后还是报错，请先确认两个点：

• Moment的script标签引入顺序在Vue的script标签之后、你写挂载逻辑的代码之前
• 打开浏览器控制台输入 window.moment 确认返回Moment对象，排除路径错误导致Moment未成功加载的问题

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