Multiple .env.development configs in Vue/Webpack

Question

I feel this should not be a hard thing to do, but I can't get it to run.

I want to have two different configs for my local Vue.js project (using vue-cli 3).

the first having VUE_APP_API_URL on my localhost,
the other connecting to a development/staging server

So, I want to have .env.development-1 and .env-development-2 or something like that; just a way to quickly switch between two otherwise identical configuration files.

I've read about build modes etc, but those articles all seem to target "building". I just want to run local devserver with a different config.

How would I solve this?

It depends on how you're building your Vue app. If its something using vue-cli take a look at cli.vuejs.org/guide/mode-and-env.html#modes . — Flame
– Flame, Commented Jan 6, 2020 at 13:10
i've read that one, but it answers none of my questions. that is what i meant by "everything seems to BUILD something, but i just want to run my dev server with a different config". as i understand it, i can build with different modes, but can i also run the dev server with a different mode? i don't see where this is mentioned — devman
– devman, Commented Jan 6, 2020 at 14:44
Before your app is run (by npm run dev or serve), it is first build (by webpack) so those ENV variables will be injected into your code. This is exactly what you need... — Michal Levý
– Michal Levý, Commented Jan 6, 2020 at 14:47

devman · Accepted Answer · 2020-01-07 11:17:23Z

1

Thanks to the comments under my original post, i found out that the solution is, in fact, really easy:

i just made an .env.staging with the VUE_APP_API_URL pointing to the staging server, everything else being the same

then

"scripts": {
    "serve:local": "vue-cli-service serve",
    "serve:staging": "vue-cli-service serve --mode staging",
}

and it works.

first had to wrap my head around the concept. thanks!

answered Jan 7, 2020 at 11:17

devman

7112 gold badges9 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple .env.development configs in Vue/Webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related