CODEWITHSUNDEEP
vue.jsnpmvuetify.js
John
John

Reputation: 4981

VueJS build multiple apps with different resources for the same project

I'm using VueJS 2.6 and Vuetify 2.1. I'm building the same app with different resources (for different brands). For the color I'm using Vuetify Theme pretty cool to change the application colors.

Each time I'm building an application I need to change manually the color, the resources (images, logos, files etc...) and the .env content. Then I run npm run serve for dev or npm run build for prod.

I'm looking for something (I imagine vue cli command) to save the brands build config, select the brand build and the build will automatically take the good resources.

So... it is possible to build multiple apps with different resources for the same project ? For example npm build google will build an app with Google brand with certain images, .env, files etc... and npm build apple will build an app with Apple brand with certain images, .env, files etc...

Upvotes: 1

Views: 670

Answers (1)

thau0x01
thau0x01

Reputation: 893

You could use environment variables to instruct NPM about what settings it should use to compile your application at the build time.

Also, you could use .env files to achieve this goal and then instruct your application to read the content of these dotEnv files based on specific environment variable.

ex: You can define those settings inside a .env file

// .env.google file
VUE_APP_BRAND_IMAGE=src/images/google.png

// .env.apple file
VUE_APP_BRAND_IMAGE=src/images/apple.png

Then in your Vue App you can access this var like this.

<template>
  <div class="brand-image">
    <img :src="brand_image" />
  </div>
</template>
<script>
const BRAND_IMAGE = process.env.VUE_APP_BRAND_IMAGE

export default {
 
  data(){
    return {
      brand_image: BRAND_IMAGE
    }
  }
}
</script>

Upvotes: 1

Related Questions