Environment Variables #787

brunoseco · 2018-02-05T18:43:29Z

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

Thanks.

vue-bot · 2018-02-05T18:43:30Z

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 · 2018-02-05T19:15:36Z

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 · 2018-02-05T19:17:34Z

Thanks dude,

But how can I replace BASE_URL?

LinusBorg · 2018-02-05T19:39:17Z

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 · 2018-02-05T19:41:10Z

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

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

brunoseco · 2018-02-05T19:55:40Z

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 · 2018-04-24T09:26:43Z

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 · 2018-05-22T07:57:27Z

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

antonelepfl · 2018-05-22T08:03:08Z

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 · 2018-06-01T14:52:58Z

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 · 2018-06-03T11:23:17Z

@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 · 2018-06-08T14:13:00Z

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 · 2018-06-08T22:36:58Z

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

RDeluxe · 2018-06-22T16:03:19Z

I've been looking for this information around but could not find it.

If I create a real env variables (during my Gitlab pipeline for example) such as VUE_APP_API_URL, will this variable take priority from the .env files ?

.env files should never contain sensible data, and thus sensible data should be provided by Jenkins/Gitlab/etc. It's not clear if the .env file from vue are working like dotenv ones

yyx990803 · 2018-06-23T03:43:02Z

Existing env variables have highest priority.

RDeluxe · 2018-06-24T16:47:48Z

Sadly, after testing it seems it is not the case.

echo "$VUE_APP_API_URL" will give me the correct output before a yarn build, so I would expect the variable to be correctly replaced in the build.

franciscobrba · 2018-06-25T14:43:49Z

We need this in DOC 🤔

LinusBorg · 2018-06-25T14:54:14Z

@RDeluxe Hard to make anything from such a blanket statement. Can you provide a reproduction?

Also, maybe you simply aren't on the latest version? We only fixed this in the last beta before RC or something.

@cbo317110 That would make sense, yet.

RDeluxe · 2018-06-25T15:10:17Z

Sorry. The repro is quite simple :

Create an .env file with a variable, such as VUE_APP_VAR = myvar
Add it to the webpack defines in vue.config.js. For now it's fine
Define an env variable (ie in windows SET VUE_APP_VAR = mysecondvar)
Build, and check. For me, it was still equals to myvar

We are using 3.0.0-beta.15

Akryum · 2018-06-25T15:15:14Z

Add it to the webpack defines in vue.config.js. For now it's fine

You shouldn't do this.

LinusBorg · 2018-06-25T15:24:49Z

Add it to the webpack defines in vue.config.js. For now it's fine

We introduced .env file so you don't have to do this, why would you?

We are using 3.0.0-beta.15

... and we changed priority for env variables in beta.16:

https://github.com/vuejs/vue-cli/blob/dev/CHANGELOG.md#300-beta16-2018-06-08

env: preserve existing env vars so load in reverse order. (fix(env): preserve existing env vars so load in reverse order. #1503) (7c1ef24)

RDeluxe · 2018-06-25T15:28:50Z

Sorry, just a reflex, does not change anything in the end I guess, but the behavior was the same anyway, and it seems the explanation was simply the version we were using ! Thanks.

PrimozRome · 2018-08-03T12:55:27Z

We are deploying vue-cli3 app od Digital Ocean trough Laravel Forge and the .env variables are not read. Locally in development environment works fine but on the DO server not. Anyone knows what is the issue?

We have followed this guide as well https://alligator.io/vuejs/using-new-vue-cli-3/#environment-variables but we can not find the solution.

UPDATE: we have now reconfigured NGINX website eon the production server to show to dist instead to public folder. Now .env is read properly. Not sure why this matter... Can anyone explain?

pavinduLakshan · 2019-04-28T05:05:53Z

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

This worked really well for me..But it would be great if there's a way in which variables can be directly read from .env file.

LinusBorg · 2019-04-28T08:06:28Z

But there is, we have a big section about it in the docs

pavinduLakshan · 2019-04-28T10:17:33Z

We need this in DOC 🤔

Now it's in the doc.see here.Thanks @LinusBorg for letting me know about that.

LinusBorg · 2019-04-28T11:30:37Z

It has always been in the docs.

Akryum · 2019-04-28T14:09:03Z

dfb2583#diff-eed3c9cd8ce5593f9de87fdeab03be11R33
8 Feb 2018 😹

SouthRibbleTech · 2019-05-13T09:18:29Z

I have the following in a .env file in the root of my project

VUE_APP_SERVER_URI = http://localhost:3333/api/v1
VUE_APP_SERVER_URL = TestString

When I do console.log(process.env) in my App.vue file, I don't see the variables

This is the output

{NODE_ENV: "development"}
NODE_ENV: "development"
__proto__: Object

Any idea why vue might not be loading my environment variables?

lexicalninja · 2019-05-22T02:10:22Z

I have the following in a .env file in the root of my project
VUE_APP_SERVER_URI = http://localhost:3333/api/v1
VUE_APP_SERVER_URL = TestString
When I do console.log(process.env) in my App.vue file, I don't see the variables

This is the output
{NODE_ENV: "development"}
NODE_ENV: "development"
__proto__: Object
Any idea why vue might not be loading my environment variables?

I am having the same issue. It's getting a little frustrating

pavinduLakshan · 2019-05-22T03:05:42Z

I have the following in a .env file in the root of my project
VUE_APP_SERVER_URI = http://localhost:3333/api/v1
VUE_APP_SERVER_URL = TestString
When I do console.log(process.env) in my App.vue file, I don't see the variables
This is the output
{NODE_ENV: "development"}
NODE_ENV: "development"
__proto__: Object
Any idea why vue might not be loading my environment variables?
I am having the same issue. It's getting a little frustrating

Didn't you try this? #787 (comment)

dvlden · 2019-12-01T21:11:43Z

@yyx990803 Hey Evan, how can I tell my vue.config.js to change the precedence of the .env variables? I want to set that .env.local and/or .env.[mode].local have the highest priority and if the same variable is defined elsewhere, it'd be ignored.

Is this possible?

Reason: I want to use .env for the production environment, .env.development for the development environment (duh) and locally while "developing" to pass some extra and some override variables within .env.local

EDIT:

So, I found this @vue/cli-service/lib/Service.js, specifically method loadEnv. I read how it works and noticed that it first loads .env.local and afterwards the .env.development. (for example, mode is an argument)

From this, I could clearly see that there's no easy way to make .env.local take priority.
Here's my solution... (it does not care about any possible .env.[mode].local options, as I don't personally need it)

// vue.config.js

const path = require('path')
const dotenv = require('dotenv')

const localEnv = dotenv.config({
  path: path.resolve(__dirname, '.env.local')
})

const stringifyValues = input => {
  const output = {}

  for (const key in input) {
    output[key] = JSON.stringify(input[key])
  }

  return output
}

module.exports = {
  chainWebpack: config => {
    config
      .plugin('define')
      .tap(args => {
        Object.assign(args[0]['process.env'], stringifyValues(localEnv.parsed))
        return args
      })
}

It does exactly what I wanted, but not sure if there's a cleaner or better approach. Please let me know, whoever sees this and @ at me! Thanks!

purskills · 2019-12-11T14:42:02Z

I tried this [#787 (comment)(https://github.com//issues/787#issuecomment-390899673) but it was not working....

purskills · 2019-12-11T14:43:23Z

I tried to stop node server and restarted node server...

npm run serve

of course, after editing vue.config.js and it is working fine...

mpan-wework · 2020-02-20T02:41:42Z

You can take a look at following and write your own chainWebpack.

https://github.com/vuejs/vue-cli/blob/eaa2b73/packages/@vue/cli-service/lib/Service.js#L90-L106
https://github.com/vuejs/vue-cli/blob/01e36f3/packages/@vue/cli-service/lib/util/resolveClientEnv.js
https://github.com/vuejs/vue-cli/blob/5bf6051/packages/@vue/cli-service/lib/config/base.js#L192-L197

vue-bot closed this as completed Feb 5, 2018

antonelepfl mentioned this issue Feb 7, 2018

Add example of baseUrl in vue.config.js #796

Closed

kuitos mentioned this issue Oct 12, 2018

Question: how do you log along with Vue-Cli? kuitos/axios-extensions#35

Closed

Environment Variables #787

Environment Variables #787

Comments

brunoseco commented Feb 5, 2018

vue-bot commented Feb 5, 2018

yyx990803 commented Feb 5, 2018 • edited Loading

brunoseco commented Feb 5, 2018

LinusBorg commented Feb 5, 2018 • edited Loading

yyx990803 commented Feb 5, 2018

brunoseco commented Feb 5, 2018

antonelepfl commented Apr 24, 2018 • edited Loading

phoet commented May 22, 2018 • edited Loading

antonelepfl commented May 22, 2018

antonelepfl commented Jun 1, 2018

stanleyxu2005 commented Jun 3, 2018 • edited Loading

bdiz commented Jun 8, 2018

bdiz commented Jun 8, 2018

RDeluxe commented Jun 22, 2018

yyx990803 commented Jun 23, 2018

RDeluxe commented Jun 24, 2018

franciscobrba commented Jun 25, 2018

LinusBorg commented Jun 25, 2018 • edited Loading

RDeluxe commented Jun 25, 2018

Akryum commented Jun 25, 2018

LinusBorg commented Jun 25, 2018

RDeluxe commented Jun 25, 2018

PrimozRome commented Aug 3, 2018 • edited Loading

pavinduLakshan commented Apr 28, 2019

LinusBorg commented Apr 28, 2019

pavinduLakshan commented Apr 28, 2019

LinusBorg commented Apr 28, 2019 • edited by Akryum Loading

Akryum commented Apr 28, 2019

SouthRibbleTech commented May 13, 2019 • edited Loading

lexicalninja commented May 22, 2019

pavinduLakshan commented May 22, 2019

dvlden commented Dec 1, 2019 • edited Loading

purskills commented Dec 11, 2019

purskills commented Dec 11, 2019

mpan-wework commented Feb 20, 2020 • edited Loading

yyx990803 commented Feb 5, 2018 •

edited

Loading

LinusBorg commented Feb 5, 2018 •

edited

Loading

antonelepfl commented Apr 24, 2018 •

edited

Loading

phoet commented May 22, 2018 •

edited

Loading

stanleyxu2005 commented Jun 3, 2018 •

edited

Loading

LinusBorg commented Jun 25, 2018 •

edited

Loading

PrimozRome commented Aug 3, 2018 •

edited

Loading

LinusBorg commented Apr 28, 2019 •

edited by Akryum

Loading

SouthRibbleTech commented May 13, 2019 •

edited

Loading

dvlden commented Dec 1, 2019 •

edited

Loading

mpan-wework commented Feb 20, 2020 •

edited

Loading