vue-cli: Env variables don't seem to load from a .env file on the new cli
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?
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 16 (1 by maintainers)
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#L1Why? It makes my API keys very longs.
For those who arrived here looking for a solution, but already have your variables prefixed with
VUE_APP_, just restart.Why is this not at the very top part of the documentation?
Especially where you give your example
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”
This should be stressed out in the docs, I spent two hours figuring out why the documented example was not working…
Also make sure the .env file is in the root of the project, and not inside src
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.The only thing that worked
Use touch to create your environment files. Install touch with
npm install touch-cli -gCreate your environment files in root folder withtouch .env.productionandtouch .env.developmentThis is working for me fine on mac with VUE 2.6.11 in package.json and a .env. When running npm run serve, the .env loads and keys work. This same thing is not working on windows.
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-8encoding. My files had aUCS-2 LE BOMencoding and vue was silently ignoring them.They started working after changing to
UTF-8.In development mode, double check that the env file name is correct(not misspelled): “.env.development” or “.env.development.local”.