vue를 통해-cli를 사용하여 Webpack 다중 환경 설정 및 배포 문제를 수정하다

Vue가 지금 이렇게 인기가 많은 이유 중 하나는 공식적인 스타터 툴 Vue가 도움이 되었기 때문입니다.-cli는 초보자들이 환경 구축 비용을 크게 줄이는 데 큰 도움이 되지만, 실제 비즈니스에서는 webpack을 개선하기 위해 다른 기능을 구현해야 하는 경우가 많습니다. 이 글은 실제 비즈니스 요구 사항을 바탕으로, 먼저 vue를 배울 것입니다.-cli가 생성한 템플릿을 수정하는 단계로 이어집니다.

Vue-cli가 생성하는 템플릿 파일 디렉토리

├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── Hello.vue
│ └── main.js
└── static

本文이 주로 중심을 맞춘 부분은

build - 编译タスクのコード

config - webpack 설정 파일

package.json - 프로젝트의 기본 정보

각 워크백 설정의 의미는 자세히 설명하지 않겠으며, vue를 참조하십시오.2.0 스크립트의 webpack 설정 파일 분석

일반적인 요구 사항 1: 다중 환경 설정 및 배포

Vue-cli가 생성한 템플릿은 npm run dev, npm run build 이 두 줄 스크립트를 설정했으며, 이는 개발 환경을 시작하고, 패키지를打包하는 역할을 합니다. 대부분의 회사에서는 개발, 테스트, 프로덕션 환경이 최소한 필요하며, 각 환경의 서버 요청 주소나 일부 설정 파라미터가 다릅니다. 따라서 여러 서버에 배포할 때 자동화 스크립트를 실행하여 빌드와 배포를 수행해야 합니다.

우선 이 문제를 명확히 해야 합니다. 다음은 저작자: 정해파, 링크, 출처: 질문과 답변을 인용합니다.

이 문제는 vue와 관계가 없으며, 일반적인 문제입니다: 코드가 어디서 빌드되는지입니다. 주인의 서버가 서버를 운영하는 것을 의미한다면, 그 두 가지 모두 좋지 않은 선택입니다. 많은 신입 사원들도 저와 같이 이렇게 코드 배포를 생각합니다.

하지만 큰 인터넷 회사에서는 더 어려울 수 있습니다. 다음은 일반적인 방법을 소개하며, 절차를 간소화하여 신입 사원이 이해하기 쉽도록 했습니다. 코드를 git이나 svn 서버에 제출할 때 주의할 점은 여기서는 소스 파일이며, 빌드된 파일이 아닙니다.

2. 서버를 구축하면 git 서버에서 배포할 코드 버전을 가져와 이곳에서 설치 의존성을 완료합니다. 예를 들어, 주인의 vue를 사용하여 배포를 위한 파일을 생성하며, 이 파일들은 일반적으로 압축 파일로 만들어 관리됩니다.

3빌드된 배포 패키지는 중계 서버에 업로드됩니다: 파일 관리 서버 클러스터

4실제로 실행되는 서버는 일반적으로 단일 서버가 아니라 클러스터입니다. 이러한 n대 서버는 파일 서버에서 해당 버전의 동일한 압축 패키지를 가져와 압축을 푸고 최종으로 실행합니다.

　

실제로, 여기에는 명확한前后순서의 프로세스가 있습니다. 모든 것을 수동으로 하면 매우 번거롭습니다. 따라서 대기업에서는 일반적으로 자동 배포 플랫폼을 사용하여 전체적인 통합을 완료합니다. 개발자는 "一键部署"만 클릭하면 이전에 설명한 내용을 완료할 수 있습니다.

예를 들어, gitlab, github와 같은 웹휘크를 제공하는 자동 배포 플랫폼과 함께 사용하면, 안정된 버전의 코드가 이미 Push 이벤트로 전송되었습니다. 따라서 버튼을 클릭하는 것도 필요가 없습니다. 이는 빌드 및 배포가 분리된 사례의 일반적인 예입니다. 이로 인해 많은 이점이 있습니다. 예를 들어, 빌드된 코드가 일치하는 것을 보장하고, 다중 환경 빌드로 인한 불일치 가능성을 줄입니다. 빌드는 일반적으로 고비용 행위이며, 서버의 불안정성을 유발할 수 있습니다. 빌드된 배포 패키지가 빠르게 롤백되거나 되돌릴 수 있으며, 동일한 버전의 코드는 재구성이 필요하지 않습니다...

그렇다면, 패키지 및 빌드는 단순한 일이 아닙니다. 따라서 자동화 도구가 필요합니다. 이미 성숙한 해결책은 docker를 사용하여 애플리케이션 컨테이너 엔진을 빌드하고 배포하는 것입니다. 그러나 저는 이 부분에 대해 잘 모르겠습니다. 누가 이를 공유할 수 있으면 좋겠습니다.

요약

위에서 소개한Webpack 다중 환경 구성 및 배포 문제는 여러분께 도움이 되었기를 바랍니다. 여러분이 어떤 질문이나 의문이 있으시면, 댓글을 남겨 주시기 바랍니다. 저는 즉시 답변을 드리겠습니다. 또한, 여러분의 양해와 지지에 깊이 감사드립니다.

고지: 본문은 인터넷에서 수집되었으며, 저작권자는 본인입니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 본 사이트는 소유권을 가지지 않으며, 인공 편집을 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해 내용이 있음을 발견하시면, notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（메일을 보내면, #을 @으로 변경하십시오. 신고를 해 주시고, 관련 증거를 제공하시면, 사이트가 즉시 저작권 침해 내용을 제거합니다.}