将构建时间戳注入 vue-cli 构建输出文件以使用 yarn 验证部署
Inject build timestamp into vue-cli build output files to verify deployments with yarn
需要验证是否部署了最新版本。我想在构建日志和构建输出的每个文件中添加时间戳。我正在使用 Vue 框架和纱线。
我需要在输出 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 将其作为 "buildtime" 添加到其他组件，等等
这适用于主构建和开发 "serve" 构建 - 但请记住根 HTML 本身不会热模块重新加载，因此尽管构建时间戳 正在更新，您必须刷新页面才能看到它。
需要验证是否部署了最新版本。我想在构建日志和构建输出的每个文件中添加时间戳。我正在使用 Vue 框架和纱线。
我需要在输出 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 将其作为 "buildtime" 添加到其他组件，等等
这适用于主构建和开发 "serve" 构建 - 但请记住根 HTML 本身不会热模块重新加载，因此尽管构建时间戳 正在更新，您必须刷新页面才能看到它。