Где и как хранить конечные точки API в vue js?

Question

Я использую vue-cli для внешнего интерфейса и lumen для внутреннего, и мне любопытно, как лучше хранить root-url и конечные точки API в vue?

Теперь у меня есть файл constants.js в каталоге src, где root-url и конечные точки API выглядят так:

const BASE_URL = "http://localhost:8000"

export const AddLanguge = BASE_URL + "/api/languages"

и когда мне нужно, например, реализовать функциональность добавления языка вкомпонент I импортирует необходимую конечную точку API из constants.js следующим образом:

import { AddLanguge } from '@/constants'

, а затем использует axios для выполнения запроса

this.$http.post(AddLanguge, params).then(response => {
   if (response.status == 200) {
       this.addLanguage(response.data.data)
   } else {
       this.setHttpResponseDialog(response)
   }
}).catch(er => {
       this.setHttpResponseDialog("Error")
})

Я искал этот вопрос, но на некоторые вопросы нет однозначного ответаговорят: все в порядке .

Другие говорят: плохо, что вы должны хранить такие данные в dev.env.js и prod.env.js, и самый важный факт здесь - я не понимаю, почему они так говорят, почему важно сохранитьэти данные в .env файлах?Или, может быть, есть какой-то другой лучший способ?

Ребята, можете ли вы дать правильный ответ с хорошим объяснением или если нет правильного ответа, и это зависит от ситуации, как я могу решить, какой способ подходит для моего случая?

Answer 1

.env файлы рекомендуются, потому что у вас могут быть разные конечные точки в зависимости от среды, то есть вы используете dev сервер с «npm run serve» или сборку для производства с «npm run build». С конфигурационными файлами .env они становятся переменными среды, и вам не нужно жестко их кодировать в своем приложении, это просто наиболее практичная вещь. С Vue CLI 3 у вас будет

//.env.development 
VUE_APP_BASEURL = "http://localhost:8000"

И в вашем приложении вы можете получить к нему доступ.

process.env.VUE_APP_BASEURL

Я просто использую базу в переменной, а затем объединяю остальные.

const BASE_URL = process.env.VUE_APP_BASEURL

this.$http.post(BASE_URL + '/api/languages/', params)