需要验证是否部署了最新版本。我想在构建日志和构建输出的每个文件中添加时间戳。我正在使用 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
然后，您可以将其添加为根App组件的 getter，将其作为"构建时"等@Provide其他组件。
这适用于主构建以及开发"服务"构建 - 但请记住，根 HTML 本身不会热模块重新加载，因此尽管构建时间戳正在更新，但您必须刷新页面才能看到它。
也许你想使用定义选项。
let commonConfig =
{
plugins: [vue()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url))
},
},
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
nested: resolve(__dirname, 'auth_redirect.html')
}
}
}
}
export default defineConfig(({ command, mode, ssrBuild }) => {
if (command === 'serve')
{
//
return commonConfig;
}
else
{
commonConfig.define = {
"BUILD_TIMESTAMP": new Date().toISOString()
};
// command === 'build'
return commonConfig;
}
})
然后，您可以将BUILD_TIMESTAMP分配给 appCode 中的任何 JavaScript 变量。
const buildNum = "BUILD_TIMESTAMP";//You will get right val in this.
定义必须与 https://esbuild.github.io/api/#non-analyzable-imports 兼容，因此在服务模式下会出现问题。所以我只在构建模式下有条件地使用它。 在开发模式下，你只会看到buildNum变量的原始值。