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?

Answer 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!