I am using Vue js and python flask as my backend.

Question

My Vue js file. Here I am using two urls from localhost. I want to make a configuration file such that if I make changes in config file, I will be able to get the same changes.

<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 &#9992;</button></a>
 </div>
</template>

In Python we can easily import from one file to another, but I dont know how to set these configs in Vue js. I have 3 components of Vue and at 6 different places I am using urls consisting of localhost. When I will host my project this all urls needs to be changed. and I have to go each lines to change . So I am searching for a config file where I can make changes and from there the urls will be imported.

I want like

config.js

URL = http://127.0.0.1:5000/

AND in my template

<a href="config.URL + sent_mail/book"

Answer 1

As I mentioned in comment - you can create some external object, something like this, let's call it config.js

export default {

    config: {
      url: 'myurl'
    }   

}

Then import it in your component file

import ConfigFile from '../config'

Then in your data you can use it like this

data() {
  return {
   url: ConfigFile.config.url
  }
}

And then you can use url it in your template.

<p>{{ url }}</p>

Answer 2

Since you use flask as a backend, you can just include config.js as a script before you include the vue scripts

const URL = http://127.0.0.1:5000/

Inside your vue files, you can then have access to the URL variable