Environment Variables

[brunoseco]

How can I configure my environment variables in this new cli? For example, BASE_URL, ENDPOINT_API?

Thanks.

[vue-bot]

Hello, your issue has been closed because it does not conform to our issue requirements. In order to ensure every issue provides the necessary information for us to investigate, we require the use of the Issue Helper when creating new issues. Thank you!

[yyx990803]

Use .env files. Variations like .env[.mode][.local] are also supported. Also, only variables starting in VUE_APP_ will be available in the app.

There will be more documentation on this soon.

[brunoseco]

Thanks dude,

But how can I replace BASE_URL?

[LinusBorg]

There will be more documentation on this soon.

As Evan just told you: Use a .env file. If you don't know what that is - it's a file named .env, in your project's root directory, that contains env variables just like you write them in your terminal:

BASE_URL=http://google.com/

[yyx990803]

BASE_URL should be configured in vue.config.js, since it's also needed by the cli-service:

module.exports = {
  baseUrl: '/foo'
}

[brunoseco]

As Evan just told you: Use a .env file. If you don't know what that is - it's a file named .env, in your project's root directory, that contains env variables just like you write them in your terminal:

I know what is that.

Actually, .env file just allow variables that starts with VUE_APP_ ;)

[antonelepfl]

Hello,
Regarding to the ENV I would like to use in the app some variables from Jenkins for example.

When in vue.config.js I do console.log('Commit:', process.env.GIT_COMMIT) I get it correctly.

In .vue files process.env is only replaced by

Object({
   NODE_ENV: "production"
})

I read about the .env but I don't know how to put variables there. What is the correct way to do it?

Thanks

[phoet]

just FYI https://alligator.io/vuejs/using-new-vue-cli-3/#environment-variables

[antonelepfl]

Thanks @phoet in the end I made it work with the change below in vue.config.js

module.exports = {
  configureWebpack: {
    ...,
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          'GIT_COMMIT': JSON.stringify(process.env.GIT_COMMIT),
          'GIT_BRANCH': JSON.stringify(process.env.GIT_BRANCH)
        }
      })
    ]
  }
}

And then using it like process.env.GIT_COMMIT in some .js

[antonelepfl]

I have done another thing that probably is not really good but it works too.

In package.json:

"scripts": {
  "build": "VUE_APP_ANNOTATION_VERSION=$(npm run --silent getAnnotationVersion) vue-cli-service build",
  "getAnnotationVersion": "node ./custom-script.js'"
},

And in custom-script.js

const {readFile} = require('fs');

function getAnnotationVersion() {
  readFile('../version.py', 'utf8', function(err, data) {
    if (err) {
      return console.log(err);
    }
    let reg = /.*VERSION.+'(.*)'/;
    let found = data.match(reg);
    if (found.length > 1) console.log(found[1]);
  });
}

getAnnotationVersion();

[stanleyxu2005]

@yyx990803 Dear Evan, after reaching to this issue report, I realized BASE_URL needs to be configured in vue.config.js not in .env. The problem has been solved. Thank you very much.

I'm also think, the README is a bit misleading. Do you think it would be easier, if Vue client could internally first looks vue.config.js, and also looks any exiting .env and take environment variables from there automatically?

[bdiz]

Does support for .env[mode][local] require we add dotenv library? I have a .env.development file in my app root with an environment variable using the VUE_APP_ prefix and it does not get loaded.

[bdiz]

No dotenv required I see:

vue-cli/packages/@vue/cli-service/lib/Service.js

Line 58 in dd39866

this.loadEnv(mode)

Sorry, I was not running with the right mode to load my .env.development file. ie vue-cli-service test:e2e --mode development