Vue cli 3 display info from the package.json

I am adding my 2 cents, as I found a shorter way and apparently the right way (https://docs.npmjs.com/misc/scripts#packagejson-vars)

Add this in your vue.config.file before the export, not inside:

process.env.VUE_APP_VERSION = process.env.npm_package_version

And voilà!

You can then use it from a component with process.env.VUE_APP_VERSION

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.

When building the Vue app, environment variables that don't begin with the VUE_APP_ prefix are filtered out. NODE_ENV and BASE_URL environment variables are the exception.

The above information applies when the environment variables are set prior to building the Vue app and not in this situation.

In a situation where environment variables are set during the build, it's important to look at what Vue CLI is doing.

The Vue CLI uses webpack.DefinePlugin to set environment variables using the object returned from the call to resolveClientEnv.

resolveClientEnv returns

{   'process.env': {}}

This means when configuring your environment variables at build time, you need to come upon a way to merge with the existing one.You need to perform a deep merge of both arrays, so that value for process.env key is an object containing keys from the resolved client environment and your keys.

chainWebpack key in the default export for vue.config.js is just about one of the ways to get this done.

The arguments passed to initialize the DefinePlugin can be merged with new environment variables that you like to configure using the underlying webpack-chain API. Here is an example:

// vue.config.jsconst merge = require('deepmerge');const pkgVersion = require('./package.json').version;const VERSION = {   'process.env': {     VERSION: JSON.stringify(pkgVersion)   }}module.exports = {  chainWebpack: config =>     config      .plugin('define')      .tap(          args => merge(args, [VERSION])      )}