Vue-cli를 기반으로 구축된 프로젝트가 백엔드와 상호 작용하는 방법에 대한 소개

이 글은 주로 Vue-cli를 기반으로 구축된 프로젝트가 백엔드와 어떻게 상호 작용하는지 자세히 소개하고 설명합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

이 기간 동안 Vue로 개발을 해왔습니다. 이전에도 사용해 본 적이 있지만 대부분 간단한 데이터 바인딩을 사용했습니다. 많은 시행착오를 겪고 이제 막 어려움을 겪기 시작한 친구들에게 도움이 되었으면 좋겠습니다.

FAQ 1: vue-cli로 환경을 설정한 후 로컬 도메인 이름과 테스트 환경의 도메인 이름이 일치하지 않습니다. 도메인 간에 어떻게 백엔드 인터페이스에 액세스할 수 있나요?

config 디렉터리에서 index.js를 찾아 dev 아래에 다음을 추가하세요.

proxyTable: {
  '/api':{//指定以/api开头的接口都走代理
   target:'https://yhhdtest.moguyun.com',//需要连接后台接口的域名
   changeOrigin:true,//支持跨域
   pathRewrite:{
    '/api':''
   }
  }
 },

위 구성은 실제로 매우 강력한 http-proxy-middleware 패키지를 사용하는 dev-server입니다. 보다 고급 사용법을 알아보려면 해당 설명서를 확인하세요.

Request /api/getGame 전송된 실제 요청은 https://yhhdtest.moguyun.com/getGame

로컬 및 프로덕션 환경에 적합한 백그라운드 요청을 구성합니다

위에 따라 구성한 후 로컬 환경이 성공할 수 있습니다. 도메인 간 및 백그라운드 상호 작용. 그러나 각 인터페이스 앞에는 불필요한 /api 접두사가 와야 하며 이는 실제로 우리 프로덕션과 일치하지 않습니다. 이때 몇 가지 구성을 수행하고 컴파일을 통해 이를 구별해야 합니다.

index.js에서 각각 dev 및 prod를 찾으세요. (일부 프로젝트는 직접 추출하여 별도의 파일로 만들 수 있습니다.)

dev.env.js

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_HOST:'"/api/"'
})

prod.env.js

module.exports = {
 NODE_ENV: '"production"',
 API_HOST:'""'
}

핵심은 API_HOST입니다. 이때 요청은 다음과 같이 작성할 수 있습니다.

process.env.API_HOST+'/getGame'

위 내용은 모두의 학습에 도움이 되기를 바랍니다. , PHP 중국어 웹사이트를 주목해주세요!

관련 권장 사항:

도메인 간 라우팅 충돌을 해결하기 위한 Vue의 아이디어 정보

vue.js 프런트엔드 및 백엔드 데이터 상호 작용을 위한 데이터 제출 작업 정보

멀티 재구성 -vue cli를 기반으로 한 페이지 스캐폴딩 프로세스 소개

위 내용은 Vue-cli를 기반으로 구축된 프로젝트가 백엔드와 상호 작용하는 방법에 대한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!