Can i place all .env files in a directory?

[Shiroyan]

What problem does this feature solve?

I don't like placing all .env files in porject root , it makes my project structure look lengthy, can i make a directory to place them in it ?

What does the proposed API look like?

I can config it in vue.config.js

[jtommy]

@LinusBorg I'm working on it and I thought to add a new option environmentsDir into vue.config.js.
Is it a good solution ?
Because I have just seen that it's possible to change the vue.config.js location using an env variable (process.env.VUE_CLI_SERVICE_CONFIG_PATH) and I need to load environment files after vue.config.js.

[LinusBorg]

might be a nice idea, yes.

[yyx990803]

Our overall guideline is - all CLI projects should have consistent file structures as much as possible. The CLI is opinionated by nature. This is why we do not provide options for configuring source directory or public directory names. If we add an option for this we essentially need to add options for renaming every possible config file and directory, and that would

1. make it more work to maintain all these options
2. increase possibility of edge cases due to different directory names
3. make Vue CLI projects all look different from one another.

[chenxeed]

Hello giving second thought of this.

As in my project structure, it's a monorepo that contain backend API and frontend website together.

my-project/
--server/ (node app)
--client/ (vue-cli)

Both may share the same variable, thus it's best if they can refer to the same .env. So my thought is to put the .env file in the root of the project folder:

my-project/
-- server/ (node app)
-- client/ (vue-cli)
-- .env

So, if it's related to the discussion here, can the vue-cli compiler in folder client still able to retrieve the env value from the root directory?

If there's a better suggestion to resolve this, please share ;)

[mihailtd]

I have the exact same issue as @chenxeed
As a workaround I installed node-env-run as a dev dependency, and now my dev script looks like:

"dev": "nodenv --env ../../.env --exec 'vue-cli-service serve'",

Not ideal but works for now.

[c2huc2hu]

Another workaround that supports variable expansion:

Add to the beginning of vue.config.js:

const dotenv = require('dotenv')
const dotenvExpand = require('dotenv-expand')
var myEnv = dotenv.config({path: '../.env'})
dotenvExpand(myEnv)

[Lejla94]

const dotenv = require('dotenv')
const dotenvExpand = require('dotenv-expand')
var myEnv = dotenv.config({path: '../.env'})
dotenvExpand(myEnv)

this works with a single .env for me, but what if i want to put on the same folder all the env files?
it is working with var myEnv = dotenv.config({path: './mypath/.env.production.local'});
i have a .env and a .env.development and a .env.production.local inside ./myPath/*

i tried

var myEnv = dotenv.config({path: '../.env'})
var myEnv = dotenv.config({path: '../.env.development'})
var myEnv = dotenv.config({path: '../.env.prouduction.local'})
dotenvExpand(myEnv, myEnv2, myEnv3)

or

var myEnv = dotenv.config({path: './myPath/'})

i just all env files to be called inside that folder

[c2huc2hu]

Ideally you shouldn't use multiple dotenv files. At the same tume. https://12factor.net/config

Instead, have multiple separate files.

If you really want to do this though, I suspect this would work:

[myEnv, myEnv2, myEnv3].map(dotenvExpand)

[Lejla94]

thanks.