将构建时间戳注入 vue-cli 构建输出文件以验证使用 yarn 的部署答案

【问题标题】：Inject build timestamp into vue-cli build output files to verify deployments with yarn将构建时间戳注入 vue-cli 构建输出文件以验证使用 yarn 的部署
【发布时间】：2020-02-02 23:00:30
【问题描述】：

需要验证是否部署了最新版本。我想在构建日志和构建输出的每个文件中添加时间戳。我正在使用 Vue 框架和纱线。

【问题讨论】：

标签： vue.js build timestamp yarnpkg package.json

【解决方案1】：

我需要在输出 Vue 应用程序中包含构建时间戳，而不是日志。

（您可以通过在vue.config.js 的webpack 部分添加console.log(new Date().toIsoString()) 来编写构建日志。）

将构建时间戳放入应用程序本身的一种方法是利用 webpack 在 HTML 本身中使用简单模板语言这一事实。

在 Vue 应用程序 index.html（例如）中，我在根 <html> 元素上插入了一个数据属性：

<html data-build-timestamp-utc="<%= new Date().toISOString() %>">
  ...
</html>

这很容易检索：

document.documentElement.dataset.buildTimestampUtc

然后您可以将其作为 getter 添加到根 App 组件上，@Provide 将其添加到其他组件中作为“构建时间”等。

这适用于主构建以及开发“服务”构建 - 但请记住根 HTML 本身不会热模块重新加载，因此尽管构建时间戳 正在更新，您必须刷新页面才能看到它。

【讨论】：