Vue 사전 스티칭

Vue 개발에서는 다양한 인터페이스 문제가 자주 발생합니다. 최근 프로젝트에서 개발과 온라인 환경 간의 인터페이스 경로가 다른 문제가 발생했습니다. 우리는 인터넷에서 많은 블로그를 발견했는데, 그 중 대부분은 동일한 복사 및 붙여넣기이며 초보자는 이해하기 어려울 수 있습니다. 그래서 저는 이 블로그를 쓰고, 어린 싹의 새로운 학생들과 상세한 인터페이스 구성 아이디어를 공유했습니다. 그들은 방금 Vue 를 프로젝트로 사용했습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 인터넷명언)

Webpack 은 프로덕션 및 온라인 환경을 위한 두 가지 구성 파일을 제공합니다. 일반적으로 개발 시 한 인터페이스를 사용하며, 프로젝트가 온라인 상태가 되면 자동으로 다른 인터페이스로 전환됩니다. 다음 그림과 같이 쓸데없는 말은 많이 하지 않는다. 첫 번째 단계는 vue-cli 프로젝트의 config 폴더 아래에서 dev.env.js 를 찾는 것입니다. 기본값은 다음과 같습니다.

그런 다음 개발 환경에서 사용되는 인터페이스 도메인 이름을 추가하여 다음과 같이 백그라운드 데이터를 요청해야 합니다.

Url_api 는 제가 직접 설정하며 사용자 정의할 수 있습니다. 다음 경로는 자체 개발 환경의 인터페이스입니다.

그런 다음 prod.env.js 를 찾습니다. 기본값은 다음과 같습니다.

이 파일에는 온라인 요청 인터페이스 구성도 추가되었습니다.

마지막으로 직접 패키지화한 axios 에서 이 인터페이스를 호출합니다.

사용자 정의 변수 = process.env.url_api (구성 파일에서만 사용자 정의) 를 사용하고 URL 을 캡슐화된 axios 에 연결합니다. 마지막으로 NPM 이 프로덕션 환경에서 dev 를 실행하면 dev.env.js 에 정의된 인터페이스가 자동으로 호출되고 NPM 이 build to package 를 실행하면 prod.env.js 에 구성된 인터페이스가 자동으로 호출됩니다.

또한 도메인 간 문제가 있습니다.

-응? 일부 소규모 파트너는 vue 에 도메인 간 에이전트를 구성하여 패치된 URL 에서 프록시 에이전트가 무효화되고 도메인 간 문제가 발생할 수 있습니다. 개인적으로 이 문제를 해결하는 아이디어는 에이전트 구성이 변경되지 않고 로컬 인터페이스만 dev.env.js 의 빈 문자열로 대체해야 한다는 것입니다. 개발 환경에서는 도메인 간 문제가 발생하지 않습니다. 만약 네가 이해하지 못한다면, 너는 나에게 물어봐도 된다. 만약 네가 더 좋은 계획을 가지고 있다면, 나는 네가 나에게 너의 건의를 줄 수 있기를 바란다. 감사합니다.

링크: /p/6393cf897663