Vue.js: Defining computed environment variables in vue.config.js (vue cli 3)

Question

The documentation for Vue CLI 3 says here https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code:

You can have computed env vars in your vue.config.js file. They still need to be prefixed with VUE_APP_. This is useful for version info process.env.VUE_APP_VERSION = require('./package.json').version

This is exactly what I want to do. But I couldn't find out how to actually define the env var there in vue.config.js. I tried:

module.exports = {
    process.env.VUE_APP_VERSION: require("../package.json").version,
    ...
}

But it just produces an error:

ERROR  SyntaxError: Unexpected token .
    /Users/lhermann/htdocs/langify/frontend/vue.config.js:2
    process.env.VUE_APP_VERSION: require("../package.json").version,
           ^

Does anyone know?

Answer 1

The environment variables are not part of the config export, you just set them in the vue.config.js file, eg

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
  // other config, eg configureWebpack
}

I've raised a feature-request to get an example added to the docs ~ https://github.com/vuejs/vue-cli/issues/2864