Multiple builds

Hello. I wanted to ask about multiple builds. Currently we have defined this in main.js:

if (process.env.NODE_ENV == "development") {
      this.domainUrl = "https://xxx...";
} else {
      this.domainUrl = "https://yyy...";
}

Then by npm run build vue cli make production build in dist/ folder.

Is there any way so it will automatically create two builds? Like dist1/ & dist2/ with this.domainUrl = "https://yyy..." & this.domainUrl = "https://zzz..."

Use .env file for this.Modes and Environment Variables | Vue CLI

e.g.

.env.developement

VUE_APP_DOMAIN_URL=https://xxx...

.env.production

VUE_APP_DOMAIN_URL=https://yyy...

then in your code

this.domainUrl = process.env.VUE_APP_DOMAIN_URL
1 Like

Thanks a lot.

Sorry. Now I’ve came back to this problem and just using different env for DEV and PROD does not solve the problem.

The problem was “how to automatically BUILD two versions of an app” → one with different env/url then other.

You can do exactly that, just create an env file for each and specify which to use with the --mode flag when you run the build command.

As for your output directory, there’s no option in Vue CLI to specify different output directories given a build mode. You could try using a conditional in the config file, but I’m not sure if that’d actually work.

Technically you could also try to change Webpack’s configuration, but it could lead to more hassles than just building to dist and copying the built files to somewhere else.

1 Like