javascript - vue-cli는 다양한 백엔드 인터페이스 서버에 따라 다양한 인터페이스 코드를 어떻게 구축합니까?

Question

개발 과정에서 npm run dev 구성 요소의 인터페이스에서 호출되는 주소는 다음과 같이 global global에서 정의한 API 변수입니다.

//개발 환경 열기
// global.API = '/api';

// 테스트 환경 열기
// global.API = '/test';

//uat 환경 열기
// global.API = '/uat';

// 프로덕션 환경 열기
// global.API = '/www';

프로덕션 환경에서 npm run build를 사용할 때 다양한 인터페이스에 따라 API를 프로덕션 환경 변수로 자동 변경하는 방법은 무엇입니까?

Answer 1

vue-cli로 생성된 코드를 며칠간 고민한 끝에 Vue는 개발(npm run dev), 프로덕션(npm run build), 유닛 테스트(npm run test)의 세 가지 구성만 필요하다고 생각했습니다. . .

장난 끝.

1. config/index.js，修改build里面的env 파일 이름을 열고 환경 변수를 기반으로 가져옵니다.
수정하면 다음과 같습니다.

으아악

2. config 디렉토리에 prod.env.js复制两份，分别是uat.env.js、testing.env.js

를 넣습니다.

3. dev.env.js、uat.env.js、testing.env.js、prod.env.js这四个文件，在大括号里面添加API: '"/api或uat或其他什么"'을 다음과 같이 수정하세요.

으아악

4. 그러면 process.env.API를 통해 어디서나 이 변수에 액세스할 수 있습니다.

5. 패키징할 때 환경 변수를 먼저 설정하세요VUE_CONFIG，例如export VUE_CONFIG=uat && npm run build.

Answer 2

https://stackoverflow.com/que...

Answer 3

https://github.com/tonyljl526...
express, vue2, webpack을 기반으로 한 이 프로젝트의 스캐폴딩을 살펴보실 수 있습니다. 귀하의 요구 사항을 충족하려면 주로 config/renderConfig.js

를 살펴보세요.