Vue 프로젝트에서 프록시를 구성하는 방법

머리말

프론트엔드 개발을 하다 보면 서버에 요청해서 데이터를 얻어야 하는 상황을 자주 접하게 됩니다. 그러나 로컬 개발을 할 때 서버가 아직 구축되지 않은 경우가 많습니다. 이때는 서버 데이터 반환을 시뮬레이션하기 위해 로컬에서 가짜 인터페이스를 구축해야 합니다.

Vue 프로젝트에서는 vue.config.js 파일을 통해 프록시를 구성하고 백엔드 인터페이스를 로컬에서 개발할 수 있어 개발 효율성이 크게 향상됩니다. 이 글에서는 Vue 프로젝트에서 프록시를 구성하고 인터페이스 가짜 데이터를 구현하는 방법을 자세히 소개합니다.

Text

Vue 프로젝트의 프록시 구성은 vue.config.js 파일에서 수행되어야 합니다. vue-cli3.x로 프로젝트를 빌드한 경우 먼저 프로젝트 루트 디렉터리에 vue.config.js 파일이 있는지 확인하세요. 해당 파일이 없으면 프로젝트 루트 디렉터리에 이 파일을 수동으로 생성해야 합니다. 이때 vue-cli에서 공식적으로 제공하는 vue.config.js의 구성 템플릿을 복사하면 됩니다.

module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 服务器地址
        changeOrigin: true,
        pathRewrite: {
          '/api': '' // 重写路径，例如接口地址是 /api/user，重写成 /user
        }
      }
    }
  }
}

위 코드에서 우리 에이전트는 devServer 옵션에 구성되어 있습니다. 그 중 port는 개발서버의 포트 번호를 지정하는 데 사용되며, Proxy는 객체 형태인 Proxy를 구성하는 데 사용되며, Key 값은 Proxy가 필요한 인터페이스를 일치시키기 위해 사용됩니다. 프록시의 구성 항목입니다.

프록시 개체의 구성 항목은 다음과 같습니다.

• 대상: 서버 주소. 프록시가 필요한 대상 서버의 주소를 나타내며, IP 주소 또는 도메인 이름일 수 있습니다. 일반적으로 http(s)://를 통해 지정됩니다. 예를 들어 http://localhost:3000은 대상 서버의 주소입니다.
• changeOrigin: 크로스 도메인인지 여부. 개발 모드에서는 true로 설정해야 합니다. 기본값은 false입니다. 즉, 요청을 받은 후 URL의 원본 필드가 프록시 주소로 직접 대체됩니다. 예를 들어 ajax를 통해 프런트엔드에서 요청한 URL은 http://localhost:8080/api/list입니다. 대상이 http://localhost:3000으로 설정된 경우,changeOrigin이 true로 설정되면 실제 요청이 발생합니다. 전송된 URL은 http://localhost:3000/api/list 가 됩니다.
• pathRewrite: 경로 재작성. /api, /web 등과 같은 접두사가 포함된 일부 인터페이스 주소의 경우 이러한 접두사를 다시 작성해야 합니다. 예를 들어 요청한 URL이 /api/user인 경우 경로를 다시 작성할 때 /api 접두사를 제거하고 /user로 다시 작성해야 합니다.

개발 환경에서는 해당 프록시가 Vue 프로젝트는 개발 서버에만 응답하여 적용됩니다. 프로덕션 환경에서는 devServer에 구성된 프록시를 Nginx와 같은 역방향 프록시 솔루션으로 변환해야 할 수도 있습니다.

요약

Vue 프로젝트 개발에서 프록시는 매우 실용적인 도구입니다. 프록시를 통해 백엔드 인터페이스에 대한 호출을 로컬 모의 데이터로 전달하고 도메인 간 문제를 원활하게 처리할 수 있습니다. 이 기사에서는 프런트엔드 개발을 보다 효율적으로 수행하기 위해 Vue 프로젝트에서 프록시를 구성하는 방법을 소개합니다. 개발에서 프록시를 사용하면 개발 속도를 높이고 개발 경험을 향상시킬 수 있습니다.

위 내용은 Vue 프로젝트에서 프록시를 구성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!