Vue-CLI build number - does it exist and how could it be used in a Vue app itself? - vue.js

Question

I have a Vue app being built for production deployment using Vue CLI.
I would like to include a typical incrementing build number in the application, so that I and testers can be sure we are testing the correct exact build. I would like to use it in the application in at least two ways a) to display it to a tester, and b) to included it in bug-tracking API calls e.g. to Sentry.io.
Currently I have to look at the hash on the app.XXXX.js and compare that. While this does uniquely identify the build, it's not sequential, is different for the CSS/JS/vendors etc and would be difficult to use in the codebase.
I'm happy to write a build wrapper script which manages the number and injects it into the build if that's what it takes.
The command I'm currently using is e.g.
npx vue-cli-service build --mode staging

Answer 1

I've implemented something using the date and time. It's in a Vue 2 project.
Add this code (or something like it) to the top of the vue.config.js file:
const verMajor = 1;
const verMinor = 0;
const now = new Date();
const padTwo = (val) => (val > 9 ? "" : "0") + val;
const nowMonth = now.getMonth() + 1;
const nowDay = now.getDate();
const verBuildDate = now.getFullYear() + padTwo(nowMonth) + padTwo(nowDay);
const verBuildTime = padTwo(now.getHours()) + padTwo(now.getMinutes()) + padTwo(now.getSeconds());
process.env.VUE_APP_VERSION = `${verMajor}.${verMinor}.${verBuildDate}.${verBuildTime}`;
console.log(`Building version: ${process.env.VUE_APP_VERSION}`);
// ...rest of the config
In the component code, you can do this:
get versionText(): string {
return process.env.VUE_APP_VERSION;
}
But I'm using class-based components so if you're not, I guess this will work instead:
computed: {
versionText: funnction () {
return process.env.VUE_APP_VERSION;
}
}
And in the template:
Ver: {{versionText}}
This results in something like:
Ver: 1.0.20211013.110634
If that looks too long, I'm sure it could be shortened according to your needs - or you could store a number in a file and write some JS in the config file to increment it on each build - or each release build if you check process.env.NODE_ENV === "release".
For further information, see: https://cli.vuejs.org/guide/mode-and-env.html
:o)