vue-cli는 Webpack 환경 구성을 운영합니다.

이번에는 Webpack 환경 구성을 위해 vue-cli를 가져오겠습니다. vue-cli가 Webpack 환경 구성을 할 때 주의 사항은 무엇인가요?

현재 Vue가 인기를 끄는 이유 중 하나는 공식 스캐폴딩 생성 도구인 Vue-cli 때문인데, 이는 초보자를 위한 환경 설정 비용을 크게 단순화합니다. 그러나 실제 비즈니스에서는 다른 기능을 구현해야 하는 경우가 많습니다. 변환을 위해 이 기사에서는 먼저 실제 비즈니스 요구 사항을 기반으로 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 - 프로젝트에 대한 기본 정보

여기에서는 웹팩 구성 각 줄의 구체적인 의미를 자세히 소개하지 않습니다. vue2.0 스캐폴딩

의 웹팩 구성 파일 분석을 참조하세요. 공통 요구 사항 1: 다중 환경 구성 및 릴리스

Vue-cli에서 생성된 템플릿은 각각 개발 환경 서비스를 시작하고 패키징을 실행하기 위해 npm run dev 및 npm run build 스크립트로만 구성됩니다. 일반적인 회사 개발 프로세스에는 최소한 개발, 테스트 시뮬레이션 및 프로덕션 환경이 있는 경우가 많습니다. 각 환경에서 응답하는 서버 요청 주소 또는 일부 구성 매개변수가 다르며 게시할 때 여러 서버에 게시해야 합니다. 그래서 자동화된 스크립트를 실행해야 합니다. 빌드하고 출시합니다.

먼저 이 문제를 명확히 하고 기사를 재인쇄해야 합니다. 저자: Zheng Haibo, 링크, 출처: Zhihu

이것은 실제로 vue와는 아무런 관련이 없으며 코드가 어디에 빌드되는지에 대한 일반적인 질문입니다. 질문의 서버가 실행 중인 서버를 참조하는 경우 두 옵션 모두 실제로는 좋은 선택이 아닙니다. 저를 포함한 많은 신입사원들은 제가 작업을 시작하기 전에 배포 코드가 이런 모습이라고 생각했습니다

그러나 실제로는 규모가 큰 인터넷 회사에서는 더 문제가 될 것입니다. 다음 소개는 일반적인 관행이며 일부 단순화된 프로세스는 초보자가 쉽게 이해할 수 있도록 하기 위한 것입니다. 코드를 git 또는 svn 서버에 제출합니다. 빌드 서버는 빌드된 파일이 아닌 소스 파일을 git 서버에서 가져와 여기에서 설치를 완료합니다. vue. 배포용 빌드 파일은 일반적으로 관리용 압축 패키지로 압축됩니다. 빌드된 릴리스 패키지는 전송 스테이션에 업로드됩니다. 실제 실행 중인 서버는 일반적으로 단일 서버가 아닙니다. 이 n개 서버는 파일 서버에서 해당 버전의 동일한 압축 패키지를 가져와서 압축을 풀고 최종적으로 실행합니다

실제로 여기에는 명백한 순차적 프로세스가 있는데, 이는 수동으로 수행하면 매우 번거로울 수 있습니다. 따라서 일반적으로 대기업에서는 이러한 작업을 조정하고 완료하기 위한 자동 배포 플랫폼을 갖게 됩니다. 개발자는 "원클릭"만 클릭하면 됩니다. 배포"를 실행하면 위의 내용이 완료됩니다

예를 들어 gitlab, github에서 제공하는 webhook과 협력하면 자동 배포 플랫폼에 안정적인 버전의 코드가 푸시되었음을 자동으로 알립니다(Push 이벤트). 그러면 버튼을 클릭할 필요조차 없습니다. 이는 빌드와 배포를 분리하는 일반적인 사례로, 코드 복사본이 빌드되도록 보장하고 다중 환경 빌드로 인해 발생하는 불일치 가능성을 방지하는 등 많은 이점을 제공합니다. 빌드는 일반적으로 오버헤드가 높은 동작입니다. , 이로 인해 서버 실행에 문제가 발생할 수 있습니다. 불안정한 부분은 빠르게 롤백하거나 복원할 수 있으며 동일한 버전의 코드를 다시 빌드할 필요가 없습니다. . .

패키징과 빌드는 간단한 문제가 아니므로 이를 구성하려면 자동화된 도구가 필요합니다. 기존의 성숙한 솔루션은 Docker를 사용하여 빌드, 게시 등을 위한 애플리케이션 컨테이너 엔진을 빌드하는 것입니다. 그러나 나는 이 분야에 익숙하지 않다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

vue-cli+webpack vue 개발 환경 구축 방법

네이티브 JS가 여러 스크롤 막대를 동기식으로 작동하는 방법

위 내용은 vue-cli는 Webpack 환경 구성을 운영합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!