코드 클라우드에 Vue 정적 페이지를 배포하는 방법

프런트 엔드 기술의 지속적인 개발로 인해 점점 더 많은 회사와 개인이 Vue.js를 사용하여 프런트 엔드 애플리케이션을 개발하기 시작하고 있습니다. Vue.js 개발자에게 Vue 정적 페이지를 배포하는 방법은 필수 기술이 되었습니다.

Code Cloud는 국내 오픈 소스 코드 호스팅 플랫폼입니다. Vue.js 개발자가 프로젝트를 클라우드에 더 잘 배포할 수 있도록 이 기사에서는 Code Cloud를 사용하여 Vue 정적 페이지를 배포하는 방법을 소개합니다.

1. 준비

Vue 정적 페이지를 배포하기 전에 프로젝트가 성공적으로 빌드되었는지 확인해야 합니다. Vue.js 프로젝트에서는 일반적으로 Vue CLI를 사용하여 빌드 출력을 통해 모든 정적 리소스와 코드가 포함된 dist 디렉터리를 생성합니다.

2. 웨어하우스 생성 및 코드 업로드

먼저 Code Cloud에 웨어하우스를 생성해야 합니다. Code Cloud에 로그인하여 "Code Cloud+"를 입력하고 "Create Warehouse"를 선택한 후 해당 정보를 입력하면 웨어하우스 생성이 완료됩니다.

창고 생성을 완료한 후 창고에 로컬 코드를 업로드해야 합니다. 로컬 Vue 프로젝트의 루트 디렉터리에서 다음 명령을 사용합니다.

git init
git add .
git commit -m 'first commit'
git remote add origin <仓库地址>
git push -u origin master

그러면 코드가 코드 클라우드 웨어하우스에 성공적으로 업로드됩니다.

3. 웨어하우스 구성

코드를 업로드한 후 웹페이지가 브라우저에서 올바르게 실행될 수 있도록 웨어하우스 설정도 구성해야 합니다.

웨어하우스에서 "설정"을 선택하고 "배포 공개 키" 열에 공개 키를 추가합니다. 추가하는 방법에는 로컬 공개 키를 직접 업로드하거나 Code Cloud에서 생성된 키를 사용하는 두 가지가 있습니다.

추가가 완료된 후 창고에 새로운 지점을 생성해야 합니다. 지점 이름은 임의로 지정할 수 있습니다. 그런 다음 지점 설정에서 "정적 페이지"를 선택하십시오.

정적 페이지에서는 GitHub Pages를 서비스 공급자로 선택하고 해당 분기를 방금 생성한 분기로 선택해야 합니다.

다음으로 정적 페이지의 항목 파일을 채워야 합니다. 여기서는 홈페이지 파일(보통 index.html)을 나타냅니다. 분기 및 항목 파일 설정이 완료된 후 "저장" 버튼을 클릭하여 웨어하우스 구성을 완료할 수 있습니다.

4. 페이지 보기

구성을 완료한 후 이제 브라우저를 통해 정적 페이지에 액세스할 수 있습니다. 웨어하우스의 홈 페이지에서 "Git Pages" 버튼을 클릭하면 배포 웹 페이지에 액세스할 수 있습니다.

우리는 기본적으로 창고 이름을 도메인 이름으로 사용하는 GitHub 페이지를 사용하고 있다는 점에 유의해야 합니다. 따라서 해당 페이지 접속 시 창고명 뒤에 "/"와 입력파일명을 추가해야 합니다. 예:

https://用户名.gitee.io/仓库名/index.html

5. 배포 업데이트

첫 번째 배포를 완료한 후 프로젝트가 자주 업데이트될 수 있습니다. 그렇다면 배포 웹 페이지에 새 코드를 어떻게 업데이트할 수 있습니까? 구체적인 단계는 다음과 같습니다.

먼저 다음 명령을 사용하여 로컬 프로젝트에서 코드를 다시 빌드해야 합니다.

npm run build

이렇게 하면 새로 수정된 코드가 포함된 새 dist 폴더가 자동으로 생성됩니다.

다음으로, 코드 클라우드 웨어하우스에서 다음 명령을 사용하여 새로 생성된 브랜치에 새 코드를 푸시해야 합니다.

git push origin 分支名

업로드가 완료된 후 브라우저 정적 페이지에서 업데이트된 코드를 직접 볼 수 있습니다.

요약

이 글의 소개를 통해 Code Cloud를 사용하여 Vue 정적 페이지를 배포하는 방법을 배웠습니다. 실제 개발에서는 다양한 특정 상황에 따라 구성하고 사용자 정의할 수 있습니다. 이 기사가 모든 사람에게 도움이 되기를 바랍니다.

위 내용은 코드 클라우드에 Vue 정적 페이지를 배포하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!