Vue Axios 프로덕션 환경 및 릴리스 환경에서 다양한 인터페이스 주소를 구성하는 단계에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-05-23 10:53:52
원래의
5324명이 탐색했습니다.

이번에는 Vue Axios 제작 환경과 릴리스 환경 간의 서로 다른 인터페이스 주소를 구성하는 단계에 대해 자세히 설명하겠습니다. Vue Axios 제작 환경과 릴리스 환경 간의 서로 다른 인터페이스 구성 시 주의사항은 무엇인가요? 실제 사례는 다음과 같습니다. 살펴보겠습니다.

이 프로젝트는 데이터 요청을 위한 Axios를 도입한 vue-cliframework로 구축한 프로젝트입니다. 다른 인터페이스 주소를 구성합니다. (먼저 axios가 통합되었는지 확인하세요. axios 통합에 대해 궁금한 점이 있으면 axios에 대한 vue-cli 소개를 참조하세요.) 작업은 다음과 같습니다

1. 다른 인터페이스 설정 찾기

/config/dev.env.js

/config/prod.env.js

에 다음 파일을 추가한 후 인터페이스 주소 도메인 이름 구성을 추가합니다. 추가된 파일 내용은 다음과 같습니다

두 번째, 다시 패키지된 axios 파일(api/api.js)에서 구성된 인터페이스 주소를 baseURL로 인터페이스 경로

자세한 api.js 파일에 연결합니다. 다음 코드를 참고하여 회사 프로젝트 팀의 코딩 습관에 맞게 조정하세요

// 配置API接口地址 
var root = process.env.API 
// 引用axios 
var axios = require('axios') 
// 自定义判断元素类型JS 
function toType (obj) { 
 return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase() 
} 
// 参数过滤函数 
function filterNull (o) { 
 for (var key in o) { 
 if (o[key] === null) { 
  delete o[key] 
 } 
 if (toType(o[key]) === 'string') { 
  o[key] = o[key].trim() 
 } else if (toType(o[key]) === 'object') { 
  o[key] = filterNull(o[key]) 
 } else if (toType(o[key]) === 'array') { 
  o[key] = filterNull(o[key]) 
 } 
 } 
 return o 
} 
function apiAxios (method, url, params, success, failure) { 
 if (params) { 
 params = filterNull(params) 
 } 
 axios({ 
 method: method, 
 url: url, 
 data: method === 'POST' ? params : null, 
 params: method === 'GET' ? params : null, 
 baseURL: root, 
 withCredentials: false 
 }) 
 .then(function (res) { 
 console.log(res); 
 return; 
 if (res.data.success === true) { 
  if (success) { 
  success(res.data) 
  } 
 } else { 
  if (failure) { 
  failure(res.data) 
  } else { 
  window.alert('error: ' + JSON.stringify(res.data)) 
  } 
 } 
 }) 
 .catch(function (err) { 
 let res = err.response 
 if (err) { 
  window.alert('api error, HTTP CODE: ' + res.status) 
  return 
 } 
 }) 
} 
// 返回在vue模板中的调用接口 
export default { 
 get: function (url, params, success, failure) { 
 return apiAxios('GET', url, params, success, failure) 
 }, 
 post: function (url, params, success, failure) { 
 return apiAxios('POST', url, params, success, failure) 
 } 
}
로그인 후 복사

3. main.js를 수정하고 자신이 리패키징한 axios 파일(api/api.js)을 도입하세요. 아래와 같이

넷째, 페이지에서 호출해서 적용되는지 테스트해 보세요. 개발 환경을 조정한 후, 빌드 후에도 공식 환경이 적용되는지 확인하세요.

직접 호출해 보세요. the ajax request

export default {  
 created(){ 
  this.$http.post('Web/test',null, res => { 
  console.log(res) 
  }) 
 } 
}
로그인 후 복사

읽어보셨을 거라 믿습니다. 이 글의 경우 방법을 마스터하셨으니 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 글을 주목해 주세요!

추천 자료:

JS가 로컬 카메라 기능을 호출하는 단계에 대한 자세한 설명

JS가 객체 속성별로 정렬되는 json 객체 배열을 구현하는 단계에 대한 자세한 설명

위 내용은 Vue Axios 프로덕션 환경 및 릴리스 환경에서 다양한 인터페이스 주소를 구성하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿