vue js의 API 끝점을 저장하는 위치와 방법

vue js의 API 끝점을 저장하는 위치와 방법

사용하고 있다vue-cli프런트 엔드 및lumen백엔드의 경우 API root-url과 엔드포인트를 vue에 저장하는 베스트 프랙티스가 궁금합니다.

이제 나는constants.js줄지어 들어가다srcroot-url 및 엔드포인트가 다음과 같은 디렉토리입니다.

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

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

예를 들어 컴포넌트에 언어 추가 기능을 구현해야 할 경우 다음과 같이 constant.js에서 필요한 API 엔드포인트를 가져옵니다.

import { AddLanguge } from '@/constants'

그런 다음 공리들을 이용해서

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아니면 다른 더 좋은 방법이 있을까요?

좋은 설명과 함께 정답을 제시해 주실 수 있나요, 아니면 정답이 없고 상황에 따라 다르다면 어떻게 제 상황에 맞는 방법을 결정할 수 있을까요?

환경에 따라 엔드포인트가 다를 수 있으므로 .env 파일을 사용하는 것이 좋습니다.즉, "npm run serve"를 사용하여 개발 서버를 실행하고 있는지, "npm run build"를 사용하여 실제 가동용으로 빌드하고 있는지 등입니다..env config 파일을 사용하면 환경변수가 되기 때문에 이를 앱에 하드코드할 필요가 없습니다.이것이 가장 실용적인 방법입니다.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)

언급URL : https://stackoverflow.com/questions/53324918/where-and-how-to-store-api-endpoints-in-vue-js