Vue modules, moment-timezone - 如何正确加载 moment-timezone 以及如何使用 2012-2022 数据答案

【问题标题】：Vue modules, moment-timezone - How to load moment-timezone correctly and how to use the 2012-2022 dataVue modules, moment-timezone - 如何正确加载 moment-timezone 以及如何使用 2012-2022 数据
【发布时间】：2018-12-18 23:01:18
【问题描述】：

我正在为我的 Vue 项目使用来自 vue-cli 的 webpack 模板，并且我在 npm 中安装了 moment 和 moment-timezone。

在我的单个文件组件中，我已经能够通过包含以下导入行来使用 moment-timezone：

import moment from 'moment'
import moment_timezone from 'moment-timezone'

moment_timezone 对象从未使用过，但它似乎需要存在才能让 moment.tz 函数工作。

我的问题是：

这是在我的设置中加载时刻和时刻时区的正确方法吗？
如何仅加载来自 moment-timezone-with-data-2012-2022.min.js 的数据？我在 moment-timezone 包的 builds 目录中看到它，但我不清楚如何指定这是我想要使用的数据。

【问题讨论】：

标签： npm webpack vue.js momentjs moment-timezone

【解决方案1】：

回答我自己的问题，因为我似乎已经解决了。

1 - 似乎moment-timezone需要使用moment，所以如果你要同时使用moment和moment-timezone，你可以简单地从moment-timezone模块中导入moment它会工作得很好。所以...

import moment from 'moment'
import moment_timezone from 'moment-timezone'

变成

import moment from 'moment-timezone'

2 - Moment-timezone 包含代表完整的 moment-timezone 代码以及 data/builds 下数据的特定版本的文件。您可以直接从这些文件中导入 moment-timezone，而无需在模块的根目录中导入 moment-timezone.js 文件。所以...

import moment from 'moment-timezone'

变成

import moment from 'moment-timezone/data/builds/moment-timezone-with-data-2012-2022.js'

【讨论】：

谢谢！这让生活变得轻松。对于任何想要在其 Vue 应用程序中全局使用 Moment 的人，您可以将其导入 app.js 文件中，然后将其添加为 Vue 实例属性。 import moment from 'moment-timezone'; Vue.prototype.$moment = moment; 然后您可以在花括号 {{ $moment() }} 或方法 this.$moment() 中访问它。