vue.js - 将构建时间戳注入(inject) vue-cli 构建输出文件以验证使用 yarn 的部署

标签 vue.js build timestamp yarnpkg package.json

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

最佳答案

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

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

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

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

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

这很容易检索:
document.documentElement.dataset.buildTimestampUtc

然后,您可以将其添加为根 App 上的 setter/getter 。组件,@Provide它作为“构建时间”等其他组件。

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

关于vue.js - 将构建时间戳注入(inject) vue-cli 构建输出文件以验证使用 yarn 的部署,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58239220/

相关文章:

java - 避免使用 ant 并通过 eclipse 自动构建。这可能吗?

Jenkins - 构建循环

SQL:每个特定时间戳只需要 1 行

MySQL CURRENT_TIMESTAMP 在创建和更新时

Laravel 7 Vue 2 Sanctum 登录错误 419; CSRF token 不匹配

macos - 构建 .dmg 包需要 Apple 开发者 ID

javascript - 使用ajax和现有表单数据上传文件

haskell - 如何在 Haskell 中获得毫秒精度的 unix 时间戳?

javascript - V-text-field 自动完成值未设置 v-model 值

javascript - 如何在计算中使用其他计算属性