title: Where and how to store API endpoints in vue js?
body: <p>I am using <code>vue-cli</code> for front-end and <code>lumen</code> for back-end and I am curious about what is a best practice to store API root-url and endpoints in vue ? </p>
  
  <p>Now I have <code>constants.js</code> file in <code>src</code> directory where API root-url and endpoints are like that:</p>
  
  <pre><code>const BASE_URL = "http://localhost:8000"
  
  export const AddLanguge = BASE_URL + "/api/languages"
  </code></pre>
  
  <p>and when I need for example to implement add language functionality in component I import required API endpoint from constants.js like that:</p>
  
  <pre><code>import { AddLanguge } from '@/constants'
  </code></pre>
  
  <p>and then use axios to make request</p>
  
  <pre><code>this.$http.post(AddLanguge, params).then(response =&gt; {
     if (response.status == 200) {
         this.addLanguage(response.data.data)
     } else {
         this.setHttpResponseDialog(response)
     }
  }).catch(er =&gt; {
         this.setHttpResponseDialog("Error")
  })
  </code></pre>
  
  <p>I searched this question, but there is no clear answer some say: <strong><em>it's ok</em></strong>. </p>
  
  <p>Others say: it's bad you must store that kind of data in <code>dev.env.js</code> and <code>prod.env.js</code>, and most important fact here is I don't get why are they saying so, why is it important to save that data in <code>.env</code> files? Or maybe is there some other better way?</p>
  
  <p>Can you guys provide a right answer with good explanation or if there is no right answer and it depends on situation how can I decide which way is suitable for my case?</p>