코드 환경에 따른 baseurl 선택 방법

이번에는 코드 환경에 따른 baseurl 선택 방법을 가져오겠습니다. 코드 환경에 따른 baseurl 방법 선택 시 주의사항은 무엇인가요? 다음은 실제 사례입니다.

공통 API 접두사를 구성하면 인터페이스 프록시 전달을 통해 로컬로 데이터를 더 잘 얻을 수 있거나 배포 중에 Nginx에서 역방향 프록시를 수행할 수 있습니다. 그러나 프로젝트에

파일 업로드가 필요한 많은 부분이 포함되면(파일 업로드는 Ajax 방법을 사용하지 않음), 프로젝트에서 더 나은 관리 인터페이스의 baseURL을 고려해야 합니다. Ajax는 axios를 사용하도록 요청하며, 원본 코드는 다음과 같습니다

수정 전

// 创建axios实例、配置baseURL、超时时间
const service = axios.create({
 baseURL: '/development/api', // 从环境进程中根据运行环境获取的api的base_url
 timeout: 5000         // 请求超时时间
})

/* 保存分配角色 */
export function fetchSaveDisUser (params1) {
 return fetch({
  url: '/user/empower',
  method: 'post',
  params: params1,
  paramsSerializer: function (params) {
   return Qs.stringify(params, { arrayFormat: 'repeat' })
  }
 })
}
/* 上传文件URL 从运行环境process.env中读取API配置 */
export let uploadUrl = '/development/api/doi/analys/upload'

최적화 방법

config/dev.env.js 및 config/prod.env.js를 찾아 다음과 같이 코드에 변수 API_BASEURL(사용자 정의 이름)을 추가합니다.

module.exports = {
 NODE_ENV: '"production"', // PS:不要复制、开发环境和生产环境有区别
 API_BASEURL: '"/development/api/"' // 需要自己添加的代码
}

그런 다음 baseURL을 process.env.API_BASEURL

로 바꾸세요. 수정된 코드는 다음과 같습니다

// 创建axios实例、配置baseURL、超时时间
const service = axios.create({
 baseURL: process.env.API_BASEURL, // 从环境进程中根据运行环境获取的api的base_url
 timeout: 5000         // 请求超时时间
})

/* 保存分配角色 */
export function fetchSaveDisUser (params1) {
 return fetch({
  url: '/user/empower',
  method: 'post',
  params: params1,
  paramsSerializer: function (params) {
   return Qs.stringify(params, { arrayFormat: 'repeat' })
  }
 })
}
/* 上传文件URL 从运行环境process.env中读取API配置 */
export let uploadUrl = process.env.API_BASEURL + '/doi/analys/upload'

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue cli 사용 방법

vue 글로벌 등록 및 로컬 등록 사용법 자세한 설명

위 내용은 코드 환경에 따른 baseurl 선택 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!