Vue-cli: Env variables don't seem to load from a .env file on the new cli

[alexjoverm]

Version

3.0.0-alpha.5

Reproduction link

https://github.com/alexjoverm/vue-cli-env-reproduce

Steps to reproduce

Clone, run npm install and npm run serve on the repo provided.

What is expected?

According to the code of the Service, some env variables should be loaded taken from a path, which are parsed on the loadEnv util.

By adding some logs, it seems that indeed the path it takes when running npm run serve is ${rootDirectory}/.env.development and ${rootDirectory}/.env.development.local. They're indeed loaded.

So, by the console.log(process.env) line in the main.js file, those variables should be printed in the console.

What is actually happening?

They're not listed in the console.

Note: if this is not supposed how is it possible to add env variables?

[yyx990803]

Only variables that starts with VUE_APP_ are loaded on the client: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/util/resolveClientEnv.js#L1

[e200]

Why? It makes my API keys very longs.

[irufus]

Why is this not at the very top part of the documentation?

Especially where you give your example

FOO=bar
VUE_APP_SECRET=secret

FOO should be VUE_APP_FOO

Edited:
It is documented but easily overlooked.

[kispi]

Why is this not at the very top part of the documentation?

Especially where you give your example

FOO=bar
VUE_APP_SECRET=secret

FOO should be VUE_APP_FOO

Edited:
It is documented but easily overlooked.

Yes I also overlooked

I was yelling on myself 'why it's not working!' like 10 minutes and eventually came here

READ THE DOCUMENTATION
"EACH AND EVERY CHARACTER"

[3zzy]

For those who arrived here looking for a solution, but already have your variables prefixed with VUE_APP_, just restart.

[gregfr]

just restart.

This should be stressed out in the docs, I spent two hours figuring out why the documented example was not working...

[malandles]

I understand that the prefix is a good thing to have when your Vue app is coupled with another framework like Laravel, but when the app is standalone, the prefix requirement is a bit exagerated no?

Is there any other reason for the hard requirement? As I can see, we are not the first to overlook the requirement, and the docs are still showing FOO=bar.

[FernandoBasso]

I noticed that I cannot use it with Ramda.

This code...

console.log(pathOr('what', ['env'], process));
console.log(pathOr('the', ['env', 'VUE_APP_TITLE'], process));
console.log(pathOr('poop 💩', ['env', 'VUE_APP_TITLE'], process));

...produces this output:

[MariaIm]

Use touch to create your environment files.
Install touch with npm install touch-cli -g
Create your environment files in root folder with touch .env.production and touch .env.development

[towry]

In development mode, double check that the env file name is correct(not misspelled): ".env.development" or ".env.development.local".

[andyslack]

I understand that the prefix is a good thing to have when your Vue app is coupled with another framework like Laravel, but when the app is standalone, the prefix requirement is a bit exagerated no?

Is there any other reason for the hard requirement? As I can see, we are not the first to overlook the requirement, and the docs are still showing FOO=bar.

Totally agree with this.

[pushpesh4u]

To anyone who is still not getting it to work, please make sure your env files (.env, .env.development, .env.development.local, .env.production) have a UTF-8 encoding. My files had a UCS-2 LE BOM encoding and vue was silently ignoring them.

They started working after changing to UTF-8.

[fokosun]

still freaking undefined!