이제 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!