How to build different versions of the same VUEJS app

Question

I'm building a VUEJS dashboard and I want to generate multiple versions from this. I want to be able to load different logo images and titles. I'm building my app with vue-cli-service build but after an hour of googling I'm still in the dark how to configure the build process to make this possible. Is there somebody who can point me in the right direction?

I've read the docs about the target parameter, but I couldn't figure out how to make a different build. I just got the same in a different directory.

Answer 1

depending on your setup it might be a lot easier to use vue-js to change titles and images depending on the domain/path/env whatever.

if you MUST have a static build than you can find an answer here: How can I create two separate bundles with vue-cli 3?

Answer 2

Probably a little late to the game, but I expect what you want is to use modes and environment variables. It's documented very well here https://cli.vuejs.org/guide/mode-and-env.html.

Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. You can access them in your application code:

console.log(process.env.VUE_APP_SECRET)

During build, process.env.VUE_APP_SECRET will be replaced by the corresponding value. In the case of VUE_APP_SECRET=secret, it will be replaced by "secret"

You can set the paths/values of things you care about with env vars. You could also have each different build as a 'mode' and maintain env vars for each use case.