vue-cli 인터페이스 에이전트 설정

본 고 는 vue-cli 인터페이스 에이전트 설정 을 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
일부 학생 들 은 인터페이스 대 리 를 설정 할 때 내 가 설정 에 성 공 했 는데 왜 인터페이스 가 통 하지 않 는 지 의문 이 들 것 이다.사실은 대 리 는 인터페이스 방문 주소 규칙 만 잘 모 르 는 데 성공 했다.
다음은 로 컬 테스트 를 밤 으로 소개 해 드 리 겠 습 니 다.
몇 가지 기본 조작 은 여기 서 소개 하지 않 겠 습 니 다.
vue-cli config 폴 더 의 index.js 를 찾 습 니 다.  인터페이스 규칙 을 설정 한 파일 입 니 다.같은 디 렉 터 리 에 proxy Config.js 를 만 듭 니 다.  일부 학생 들 은 원본 파일 을 직접 수정 하 는 습관 이 있 지만 새 파일 을 사용 하 는 방식 을 추천 합 니 다.

module.exports = {
  proxyList: {
    '/api': {
      target: 'http://localhost:3000',  （          ）
      changeOrigin: true,（    ，     ，                   ）
      pathRewrite: {'^/api': '' } （          ）
    }
  }
}

*****경로 규칙**************
상기 코드 가 실 행 된 후에 인터페이스 에서'/api'를 보면 자동 으로 우리 가 설정 한 주소 가 된다 는 뜻 입 니 다.그러면 우 리 는 설정 할 때 인터페이스 쓰기 기준 을 규범화 시 킬 수 있 습 니 다.이 속성 pathRewrite 경 로 를 재 작성{'^/api':'}은 길 을 양보 하고 싶 은 이유 가 어떻게 되 는 지 말 합 니 다.비어 있 으 면 분석 할 때 우리 의 인터페이스 가$http.get('/api/good')이 라 고 쓰 여 있다 면 서버 에서 우 리 는/good 의 방문 을 볼 수 있 습 니 다.만약 에 이때 서버 에서 해당 하 는 경로 가 일치 하지 않 으 면 고객 센터 에서 오류 가 표 시 됩 니 다.포트 번호 가 클 라 이언 트 의 포트 번호 이기 때문에 많은 학생 들 이 효과 가 없다 고 착각 합 니 다.마찬가지 로{'^/api':'/api'}를 설정 하면 서버 에서/api/goods 의 인터페이스 접근 을 볼 수 있 습 니 다./api 를 자동 으로 프 록 시 주소 로 해석 할 뿐만 아니 라 서버 의 경로 로 도 보 여 준 다 는 뜻 입 니 다.
또한 루트 규칙 을 설정 할 때 구분자 주의/  어떤 학우 들 은 이렇게 target 을 쓰 는 것 을 좋아한다.http://localhost:3000/'포트 뒤에 구분자 하 나 를 쓰 면 경로 가 맞지 않 는 것 을 발견 할 수 있 습 니 다.이 때 는 이름 을 지 을 때 도'/'경로 규칙 에'/'인 터 페 이 스 를 추가 해 야 합 니 다.그렇지 않 으 면 요청 인터페이스 에 구분자 가 하나 더 있 는 것 을 발견 할 수 있 습 니 다.예 를 들 어'/api/goods'.
설정 이 끝 난 후 index.js 에 proxyConfig.js 를 도입 하여 proxyTable 설정 완료

const proxyConfig = require('./proxyConfig')
module.exports = {
  dev: {
    env: require('./dev.env'),
    host: 'localhost',
    port: 8188,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: proxyConfig.proxyList,
    cssSourceMap: false,
  }
 }

요청 할 때 이렇게 쓰 세 요.

axios.get('/api/goods').then((res)=>{console.log(res.data);}}).catch((err)=>{console.log(err);}})

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.