In a vue cli 3 project I want to display a version number in the webpage. The version number lies in the package.json
file.
The only reference to this that I found is this link in the vue forum.
However, I can’t get the proposed solution to work.
Things I tried
Use
webpack.definePlugin
as in the linked resource:
vue.config.js
const webpack = require('webpack'); module.exports = { lintOnSave: true, configureWebpack: config => { return { plugins: [ new webpack.DefinePlugin({ 'process.env': { VERSION: require('./package.json').version, } }) ] } }, }
Then in main.ts
I read process.env
, but it does not contain VERSION (I tried several variants to this, like generating a PACKAGE_JSON field like in the linked page, and generating plain values like ‘foo’ instead of reading from package-json
). It never worked, it is like the code is being ignored. I guess the process.env
is being redefined later by vue webpack stuff.
The process
log in main.ts
contains, however, all the stuff that process
usually contains in a vue-cli project, like the mode and the VUE_APP variables defined in .env
files.
Try to write to
process
right on the configure webpack function,
like:
configureWebpack: config => { process.VERSION = require('./package.json').version },
(to be honest I did not have much hope with this, but had to try).
Tried the other solution proposed in the linked page,
like:
// vue.config.js module.exports = { chainWebpack: config => { config.plugin('define').tap( ([options = {}]) => { return [{ ...options, // these are the env variables from your .env file, if any arr defined VERSION: JSON.stringify(require('./package.json').version) }] }) } }
But this fail silently too.
Use the
config.plugin('define')
syntax suggested by @Oluwafemi,
like:
chainWebpack: (config) => { return config.plugin('define').tap( args => merge(args, [VERSION]) ) },
Where VERSION
is a local variable defined as:
const pkgVersion = require('./package.json').version; const VERSION = { 'process.env': { VUE_APP_VERSION: JSON.stringify(pkgVersion) } }
But this is not working either.
I am re-starting the whole project everytime, so that’s not the reason why the process stuff does not show up.
My vue-cli version is 3.0.1.
Advertisement
Answer
TLDR
The following snippet in the vue.config.js
file will do the trick, and will allow you to access the version of your app as APPLICATION_VERSION
:
module.exports = { configureWebpack: config => { return { plugins: [ new webpack.DefinePlugin({ 'APPLICATION_VERSION': JSON.stringify(require('./package.json').version), }) ] } }, }
TIP:
Don’t even try to add some key to process.env
via webpack.definePlugin
: it won’t work as you probably expect.
Why my previous efforts did not work
At the end, I solved the issue via webpack.DefinePlugin
. The main issue I had is that the original solution I found was using definePlugin
to write to a process.env.PACKAGE_JSON
variable.
This suggests that definePlugin
somehow allows to add variables to process
or process.env
, which is not the case. Whenever I did log process.env
in the console, I didn’t find the variables I was trying to push into process.env
: so I though the definePlugin
tech was not working.
Actually, what webpack.definePlugin
does is to check for strings at compile time and change them to its value right on your code. So, if you define an ACME_VERSION
variable via:
module.exports = { lintOnSave: true, configureWebpack: config => { return { plugins: [ new webpack.DefinePlugin({ 'ACME_VERSION': 111, }) ] } }, }
and then, in main.js
you print console.log(ACME_VERSION)
, you will get 111
properly logged.
Now, however, this is just a string change at compile time. If instead of ACME_VERSION
you try to define process.env.VUE_APP_ACME_VERSION
…
when you log process.env
the VUE_APP_ACME_VERSION
key won’t show up in the object. However, a raw console.log('process.env.VUE_APP_ACME_VERSION')
will yield 111
as expected.
So, basically, original link and the proposed solutions were correct to some degree. However, nothing was really being added to the process
object. I was logging proccess.env
during my initial tries, so I didn’t see anything working.
Now, however, since the process
object is not being modified, I strongly suggest anyone trying to load variables to their vue app at compile time not to use it. Is misleading at best.