将构建时间戳注入 vue-cli 构建输出文件,以使用纱线验证部署

sar*_*nei 7 timestamp build vue.js package.json yarnpkg

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

And*_*w E 18

我需要在输出 Vue 应用程序中有一个构建时间戳,而不是日志。

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

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

在 Vue 应用程序中index.html(例如),我在根<html>元素上插入了一个 data 属性:

<html data-build-timestamp-utc="<%= new Date().toISOString() %>">
  ...
</html>
Run Code Online (Sandbox Code Playgroud)

这很容易检索:

document.documentElement.dataset.buildTimestampUtc
Run Code Online (Sandbox Code Playgroud)

然后,您可以将其添加为根App组件上的 getter,将@Provide其作为“buildtime”添加到其他组件中,等等。

在主构建和发展这个工程“服务”建设-但是记住根HTML本身不热模块重装,所以虽然生成时间标记更新,你必须刷新页面,看看它。