Inject build timestamp into vue-cli build output files to verify deployments with yarn

I needed to have a build timestamp in the output Vue app, not the logs.

(You could write to build logs by adding a console.log(new Date().toIsoString()) in the webpack part of vue.config.js.)

One way to get the build timestamp into to the app itself is to make use of the fact that webpack uses a simple template language in the HTML itself.

In the Vue app index.html (for example), I inserted a data attribute on the root <html> element:

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

That's easily retrieved:

document.documentElement.dataset.buildTimestampUtc

You can then add that as a getter on the root App component, @Provide it to other components as "buildtime", etc.

This works on a main build as well as a development "serve" build - but remember the root HTML itself doesn't hot-module-reload, so although the build timestamp is being updated, you'll have to refresh the page to see it.

Maybe you want to use the define option.

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;
  }
})

And then you can just assign BUILD_TIMESTAMP to any javascript variable in your appCode.

const buildNum = "BUILD_TIMESTAMP";//You will get right val in this.

define has to be compatible with https://esbuild.github.io/api/#non-analyzable-imports so gives issues in serve mode. So I have used it conditionally in build mode only. In Dev Mode you will see just raw value of buildNum variable.