vue 프로젝트 를 사용 하여 여러 에이전트 의 주의 점 을 설정 합 니 다.

Vue 프로젝트 의 개발 과정 에서 로 컬 디 버 깅 의 편 의 를 위해 vue.config.js 에 devserver 를 설정 하여 로 컬 에서 서버 를 시작 합 니 다.이 옵션 에서 저 희 는 proxy 속성 을 설정 하여 로 컬 요청(예:/api/action)을 백 엔 드 개발 서버 에 대리 합 니 다(예::http://xxx.xxx.xxx/api/action）

devServer: {
        port: 8081,
        proxy: {
            '/api/action': {
                target: 'http://192.168.200.106:81',
                changeOrigin: true,
                ws: true,
                secure: false
            }
        }
    },
​```

이 설정 에서 다음 두 가 지 를 주의해 야 합 니 다.
인터페이스 주소 가 겹 치 는 주소 가 있 을 때 일치 도가 낮은 것 을 뒤에 놓 습 니 다.
예 를 들 면:

*192.191.1.1 까지/일치 합 니 다.

*192.191.1.2

에/api 매 칭

*/api/action 을 192.191.1.3

에 일치 시 킵 니 다.
만약 우리 가 아래 처럼 쓴다 면:

proxy: {
            '/': {
                target: 'http://192.191.1.1',
                changeOrigin: true,
                ws: true,
                secure: false
            },
    '/api': {
                target: 'http://192.191.1.2',
                changeOrigin: true,
                ws: true,
                secure: false
            },
    '/api/action': {
                target: 'http://192.191.1.3',
                changeOrigin: true,
                ws: true,
                secure: false
            }
        }

그러면 모든/,/api 와/api/action 의 요청 은 192.191.1.1 위로 대 리 됩 니 다.
이 유 는 이 일치 가 실제 적 으로 정규 일치 하 는 과정 이기 때 문 입 니 다.우리 가/api 를 요청 할 때 먼저 설정 항목 의 첫 번 째 를 읽 었 습 니 다.설정 에 있 는/api 를 가 져 와 서 요청 에 있 는/api 에 설정 항목 이 포함 되 어 있 는 것 을 발 견 했 습 니 다.일치 하 는 것 은 192.191.1.1 위로 요청 을 대 리 했 습 니 다./api/action 에 대한 일치 도 마찬가지 입 니 다.
즉,이 일치 규칙 은 설정 항목 의 주 소 를 요청 한 주소 와 일치 시 키 는 것 입 니 다.요청 한 주소 에 설정 의 주 소 를 포함 하면 일치 하 는 데 성공 합 니 다.그렇지 않 으 면 다음 설정 항목 을 가지 고 계속 일치 합 니 다.
따라서 설정 에 있 는 주 소 는 요청 주소 와 일치 하 는 문자 가 적 을 수록 일치 도가 낮 습 니 다.이전 예 에서 설정 한 주소(/)는 요청 주소(/api)와 한 글자 만 일치 하기 때문에 일치 도가 낮 습 니 다.
그래서 우리 의 정확 한 문법 은 다음 과 같다.

proxy: {
            '/api/action': {
                target: 'http://192.191.1.3',
                changeOrigin: true,
                ws: true,
                secure: false
            },
    '/api': {
                target: 'http://192.191.1.2',
                changeOrigin: true,
                ws: true,
                secure: false
            },
    '/': {
                target: 'http://192.191.1.1',
                changeOrigin: true,
                ws: true,
                secure: false
            }
        }

이렇게 세 개의 주소 로 가 는 요청 은 모두 해당 주소 로 정확하게 대리 할 수 있다.
여러 주소 에이전트 가 같은 target 일 때 통합 할 수 있 습 니 다.
실제 응용 에서 백 엔 드 는 마이크로 서비스 모델 로 개발 되 기 때문에 개발 단계 에서 우 리 는 서로 다른 서 비 스 를 서로 다른 주소 로 대리 할 수 있 습 니 다.서비스 가 많 을 때 우리 대리 의 수량 도 많 습 니 다.

proxy: {
  		'/api/action': {
                target: 'http://192.191.1.3',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action2': {
                target: 'http://192.191.1.4',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action3': {
                target: 'http://192.191.1.3',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action4': {
                target: 'http://192.191.1.4',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action5': {
                target: 'http://192.191.1.5',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action6': {
                target: 'http://192.191.1.6',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action7': {
                target: 'http://192.191.1.5',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action8': {
                target: 'http://192.191.1.6',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action9': {
                target: 'http://192.191.1.7',
                changeOrigin: true,
                ws: true,
                secure: false
            },
			 '/api': {
                target: 'http://192.191.1.2',
                changeOrigin: true,
                ws: true,
                secure: false
            },
			 '/': {
                target: 'http://192.191.1.1',
                changeOrigin: true,
                ws: true,
                secure: false
            },              
        }

설정 한 프 록 시 수량 이 10 개 를 넘 으 면 개발 환경 컴 파일 패키지 시 다음 과 같은 오 류 를 보고 합 니 다.

오 류 를 해결 하고 코드 의 부 피 를 줄 이기 위해 우 리 는 같은 target 을 가 진 설정 항목 을 합병 할 수 있 습 니 다.앞에서 알 수 있 듯 이 여 기 는 정규 가 일치 하 는 과정 입 니 다.그러면 우 리 는 정규 문법 을 이용 하여 그들 을 합병 할 수 있 습 니 다.

proxy: {
  		'/api/action|/api/action3': {
                target: 'http://192.191.1.3',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action2|/api/action4'': {
                target: 'http://192.191.1.4',
                changeOrigin: true,
                ws: true,
                secure: false
            },
             
              '/api/action5|/api/action7': {
                target: 'http://192.191.1.5',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action6|/api/action8': {
                target: 'http://192.191.1.6',
                changeOrigin: true,
                ws: true,
                secure: false
            },
              '/api/action9': {
                target: 'http://192.191.1.7',
                changeOrigin: true,
                ws: true,
                secure: false
            },
			 '/api': {
                target: 'http://192.191.1.2',
                changeOrigin: true,
                ws: true,
                secure: false
            },
			 '/': {
                target: 'http://192.191.1.1',
                changeOrigin: true,
                ws: true,
                secure: false
            },              
        }

물론 정식 배 치 를 할 때 는 백 엔 드 가 통일 대 리 를 해 야 한다.
이상 은 개인 적 인 경험 이 므 로 여러분 에 게 참고 가 되 기 를 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주시 기 바 랍 니 다.