Vue는 대화형 웹 애플리케이션을 보다 쉽게 만들 수 있는 인기 있는 JavaScript 프레임워크입니다. Vue의 장점 중 하나는 가상 DOM을 사용하여 웹 페이지의 다양한 구성 요소를 관리하므로 구성 요소 수준에서 데이터와 뷰를 보다 효율적으로 업데이트할 수 있다는 것입니다.
그러나 Vue를 사용하여 웹 애플리케이션을 작성할 때 문제를 발견하게 됩니다. 개발 과정에서 우리가 작성하는 Vue 구성 요소는 일반적으로 .vue 파일 형식으로 존재하며 이러한 파일은 프로덕션에 직접 사용할 수 없습니다. 프로덕션 환경에서는 이러한 구성 요소를 웹 서버에 배포하기 전에 정적 HTML, CSS 및 JavaScript 파일로 컴파일해야 합니다. 따라서 문제는 이렇게 컴파일된 정적 파일을 어디에 배치할 것인가입니다.
답은 간단합니다. 프로덕션에서 Vue를 사용할 때 Vue CLI를 사용하여 애플리케이션을 구축해야 합니다. 그러면 Vue 구성 요소가 자동으로 정적 HTML, CSS 및 JavaScript 파일로 컴파일되어 ./dist에 저장됩니다. 예배 규칙서. 이 디렉토리는 Vue CLI에 의해 자동으로 생성되며 애플리케이션의 모든 정적 리소스를 포함합니다.
./dist 디렉토리에서 다음과 유사한 파일 구조를 볼 수 있습니다:
dist/ ├── css/ │ ├── app.1a2b3c4d.css │ └── chunk-vendors.5e6f7g8h.css ├── js/ │ ├── app.1a2b3c4d.js │ ├── app.1a2b3c4d.js.map │ ├── chunk-vendors.5e6f7g8h.js │ └── chunk-vendors.5e6f7g8h.js.map └── index.html
이 파일 구조에서 우리의 항목 파일이자 브라우저인 index.html 파일을 볼 수 있습니다. 우리 앱에 액세스 중입니다. 또한 애플리케이션에 필요한 CSS 및 JavaScript 파일이 각각 포함된 css 디렉터리와 js 디렉터리도 볼 수 있습니다. 그 중 파일 이름에 포함된 문자열은 캐싱 및 업데이트를 용이하게 하기 위한 소스 코드의 해시 값입니다.
우리는 ./dist 디렉터리의 모든 파일을 웹 서버에 배포한 다음 브라우저를 통해 애플리케이션에 액세스할 수 있습니다. Vue를 사용할 때 수동 작업을 줄이고 싶다면 Jenkins와 같은 자동화된 배포 도구를 사용하여 애플리케이션을 자동으로 구축하고 배포할 수도 있습니다.
요약하자면 Vue의 구성 요소는 프로덕션 환경에서 Vue CLI를 통해 컴파일해야 하며 컴파일된 파일은 ./dist 디렉터리에 저장됩니다. ./dist 디렉터리의 정적 파일을 웹 서버에 배포하고 브라우저를 통해 애플리케이션에 액세스할 수 있습니다.
위 내용은 vue로 컴파일된 정적 페이지가 어디에 있는지에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
