Here is my Vue js file where I am utilizing two URLs from localhost. My goal is to create a configuration file that will allow me to make changes in one place and have those changes reflected throughout.
<template>
<div>
<div class="global-buttons">
<a href="http://127.0.0.1:5000/sent_mail/book" target="_blank"><button>See Previously Sent Mail</button></a>
<button @click="saveData()">Save Current Changes</button>
<button @click="loadData(savedUrl)">Load Previously Saved Data</button>
<a href="http://127.0.0.1:5000/mail/book" target="_blank"><button>Send Mail ✈</button></a>
</div>
</template>
In Python, importing from one file to another is easy, but I'm unsure how to achieve this in Vue js. I have 3 Vue components where I use localhost URLs at 6 different locations. When I deploy the project, these URLs will need to be updated individually. This is why I am looking for a configuration file where I can centralize these URL changes.
I envision something like
config.js
URL = http://127.0.0.1:5000/
And then in my template
<a href="config.URL + sent_mail/book"