.env vars overload vars set in environment

[morrislaptop]

Version

3.0.0-beta.15

Reproduction link

https://github.com/morrislaptop/vue-env-issue

Steps to reproduce

• Step 1: Run yarn serve
• Step 2: Run VUE_APP_FOO=foorbar yarn serve

Now put "VUE_APP_FOO=bar" in .env.local

• Step 3: Run yarn serve
• Step 4: Run VUE_APP_FOO=foorbar yarn serve

What is expected?

I would expect the env vars to be loaded with the following specificity (later overrides earlier)

• .env
• .env.local
• shell environment variables

Results:

1. VUE_APP_FOO=foo
2. VUE_APP_FOO=foobar
3. VUE_APP_FOO=bar
4. VUE_APP_FOO=foobar

What is actually happening?

The env vars are loading in the following specificity (later overrides earlier)

• shell environment variables
• .env
• .env.local

Results:

1. VUE_APP_FOO=foo
2. VUE_APP_FOO=foo
3. VUE_APP_FOO=bar
4. VUE_APP_FOO=bar

[LinusBorg]

These Lines:

vue-cli/packages/@vue/cli-service/lib/util/loadEnv.js

Lines 5 to 7 in 5064cf5

	Object.keys(config).forEach(key => {
	process.env[key] = config[key]
	})

should probably look more like this:

  Object.keys(config).forEach(key => {
     // see @akryum's comment
    //  if (!process.env[key]) {
    if (typeof process.env[key] !== undefined) {
      process.env[key] = config[key]
    }
})

Then we would have to switch the order off appliance to

• .env.mode.local
• .env.mode
• .env.local
• .env

which means switching these calls:

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

Lines 109 to 110 in 5064cf5

	load(basePath)
	load(localPath)

...as well as these:

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

Lines 57 to 61 in 5064cf5

	this.loadEnv()
	// load mode .env
	if (mode) {
	this.loadEnv(mode)
	}

[Akryum]

I would probably do if (typeof process.env[key] === 'undefined') { instead.

[LinusBorg]

right!