In the root of your project create your environment files:
To then load those configs, you would specify the environment via mode
i.e.
npm run serve --mode development //default mode
npm run serve --mode someEnvironment1
In your env
files you simply declare the config as key-value pairs, but if you're using vue 3, you must prefix with VUE_APP_
:
In your .env:
VUE_APP_TITLE=This will get overwritten if more specific available
.env.someEnvironment1:
VUE_APP_TITLE=My App (someEnvironment1)
You can then use this in any of your components via:
myComponent.vue:
<template>
<div>
{{title}}
</div>
</template>
<script>
export default {
name: "MyComponent",
data() {
return {
title: process.env.VUE_APP_TITLE
};
}
};
</script>
Now if you ran the app without a mode
it will show the 'This will get...' but if you specify a someEnvironment1
as your mode
then you will get the title from there.
You can create configs that are 'hidden' from git by appending .local
to your file: .env.someEnvironment1.local
- very useful for when you have secrets.
Read the docs for more info.