vue-cli 패키징 시 프로젝트 관련 구성 파일 추출 문제 관련(자세한 튜토리얼)

이제 vue-cli 기반으로 패키징할 때 프로젝트 관련 구성 파일에 대한 자세한 설명을 공유하겠습니다. 참고할만한 가치가 있어 모두에게 도움이 되길 바랍니다.

머리말: 개발을 위해 vue-cli를 사용할 때 인터페이스의 요청 주소(axios.defaults.baseURL)와 같은 일부 설정을 동적으로 구성해야 하는 경우가 많습니다. 이러한 설정은 프로젝트가 컴파일된 후에 설정해야 할 수도 있습니다. 그래서 vue-cli에서 이러한 구성 파일을 추출하고 webpack이 구성 파일을 컴파일하지 못하도록 해야 합니다.

먼저 /static 아래에 구성 파일로 새 js 파일을 만들어야 합니다.

내용은 다음과 같습니다.

window.g={
 AXIOS_TIMEOUT:10000,
 SERVICE_CONTEXT_PATH:`http://10.200.199.84:9090/`//配置服务器地址
}

여기서 모든 구성은 창 개체의 속성에 주입됩니다. 이를 사용자 정의할 수 있습니다.

그런 다음 index.html에 이 js를 도입하세요

<script src="/static/js/config.js"></script>

프로젝트에서 사용할 때 window.g를 사용하여 이 구성 파일의 내용을 직접 호출하세요.

이렇게 구성한 후 패키징하면 이런 효과가 나옵니다

여기에 있는 구성 파일은 그대로 출력되고 패키징되지 않는 것을 볼 수 있습니다. 그러면 컴파일된 프런트엔드 프로젝트를 에게 넘깁니다. 배포 담당자에게 사전에 배경 주소를 물어볼 필요가 없으며 구성 내용을 수정하여 배포 담당자가 직접 서버 주소를 확인할 수 있습니다.

이렇게 하면 프로젝트 관련 구성 파일을 추출할 수 있습니다.

위 내용은 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 글:

JavaScript Starry Navigation Bar 구현 방법

vue.js의 계산, 필터링, 가져오기, 설정 사용법과 차이점에 대한 자세한 설명

도메인 구입부터 사용까지 자세한 설명 node.js 프로젝트의 전체 프로세스를 배포하는 pm2

위 내용은 vue-cli 패키징 시 프로젝트 관련 구성 파일 추출 문제 관련(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!