gitee에 vue 프로젝트를 배포하는 방법

프런트엔드 기술이 발전함에 따라 점점 더 많은 기업이나 개인이 Vue를 사용하여 프런트엔드 프로젝트를 개발하기 시작하고 있습니다. 그런데 프로젝트 개발이 완료된 후 어떻게 클라우드에 배포할 수 있을까요?

이 기사에서는 Vue 프로젝트를 Gitee에 배포하여 프로젝트를 전 세계에 쉽게 보여줄 수 있는 방법을 살펴보겠습니다.

1. Gitee 저장소 만들기

먼저 Vue 프로젝트의 코드를 저장할 Gitee에 저장소를 만들어야 합니다. 아직 Gitee 계정이 없다면 먼저 등록해 주세요.

Gitee에 로그인하고 오른쪽 상단에 있는 "새로 만들기" 버튼을 클릭하고 드롭다운 메뉴에서 "새 창고"를 선택하세요.

새 페이지에서 저장소 이름, 설명 및 선택한 카테고리를 입력하고 "공개" 또는 "비공개" 액세스를 선택한 후 기타 설정(예: 프로젝트 언어 등)을 추가하세요.

필요한 정보를 모두 입력하고 올바른지 확인한 후 "창고 만들기"를 클릭하세요.

2. 로컬에서 Vue 프로젝트 만들기

Gitee에서 저장소를 만든 후에는 로컬에서 Vue 프로젝트를 만들어야 합니다.

Vue CLI를 사용하여 새 Vue 프로젝트를 생성하려면 명령줄에 다음 명령을 입력하세요.

vue create <app-name>

그런 다음 원하는 구성 유형을 선택하고 프로젝트 생성이 완료될 때까지 기다립니다.

프로젝트 생성이 완료되면 다음 명령을 사용하여 로컬 개발 서버를 시작하세요.

npm run serve

이렇게 하면 Vue 애플리케이션을 보고 테스트할 수 있는 로컬 서버가 시작됩니다.

3. 로컬 저장소와 Gitee 저장소 연결

이제 로컬 Vue 프로젝트와 Gitee 저장소를 생성했지만 아직 서로 연결되지 않았습니다.

로컬 Vue 프로젝트 디렉터리에서 명령줄을 열고 다음 명령을 입력하세요.

git init

이렇게 하면 새 로컬 Git 저장소가 생성됩니다. 다음으로 이 로컬 저장소를 Gitee 저장소와 연결해야 합니다.

명령줄에 다음 명령을 입력하세요.

git remote add origin <远程仓库地址>

여기서 <원격 창고 주소>는 Gitee에서 생성한 창고 주소여야 합니다.

이제 로컬 저장소와 원격 Gitee 저장소가 성공적으로 연결되었습니다.

4. Gitee 저장소에 로컬 파일 업로드

이 단계에서는 로컬 Vue 프로젝트의 코드를 Gitee 저장소에 업로드해야 합니다.

로컬 및 Vue 프로젝트 디렉터리에서 다음 명령을 사용하여 코드를 추가하고 로컬 Git 저장소에 커밋합니다.

git add .
git commit -m "Initial commit"

이렇게 하면 Vue 애플리케이션의 모든 파일과 폴더가 Git의 로컬 저장소에 추가되고 제출됩니다.

다음으로 다음 명령을 사용하여 모든 로컬 변경 사항을 원격 Gitee 저장소에 푸시합니다.

git push -u origin main

이렇게 하면 Vue 프로젝트 코드가 Gitee에서 생성한 저장소에 푸시됩니다. 업로드가 완료되면 Gitee에서 프로젝트 코드를 볼 수 있습니다.

5. Vue 프로젝트 배포

이제 Vue 프로젝트를 Gitee 저장소에 업로드했습니다. 배포 방법은 다음과 같습니다.

Gitee 저장소에서 "설정" 버튼을 클릭하고 "페이지" 탭을 선택하세요.

"페이지" 탭에서 Vue 프로젝트에 대한 Gitee 페이지 서비스를 활성화할 수 있습니다.

먼저 "소스" 드롭다운 메뉴를 선택하고 거기에서 "gh-pages" 분기를 선택하세요. 그런 다음 "저장" 버튼을 선택하여 변경 사항을 저장합니다.

페이지 상단에 프로젝트의 URL이 표시됩니다. 이제 Vue 프로젝트가 성공적으로 배포되었으며 이 URL을 통해 액세스할 수 있습니다.

6. Vue 프로젝트 업데이트

Vue 프로젝트를 Gitee에 배포한 후 업데이트하거나 수정해야 할 수도 있습니다. 다음 단계에 따라 업데이트할 수 있습니다.

먼저 로컬 Vue 프로젝트 디렉터리에서 다음 명령을 실행하여 최신 코드를 가져옵니다.

git pull origin main

이렇게 하면 최신 코드가 다운로드되어 로컬 저장소에 병합됩니다.

다음으로 변경 사항을 Gitee 저장소에 업로드하세요.

git add .
git commit -m "Your commit message"
git push origin main

이제 업데이트가 Gitee에 성공적으로 업로드되었으며 Vue 프로젝트에 게시되었습니다.

요약:

이 튜토리얼에서는 Vue 프로젝트를 Gitee에 배포하는 방법을 시연했습니다. Gitee에 저장소를 생성하고 로컬 Vue 프로젝트를 Gitee 저장소와 연결했는지 확인하세요. 다음으로 파일을 Gitee 저장소에 업로드하고 Gitee Pages 서비스를 활성화하면 Vue 프로젝트를 쉽게 배포할 수 있습니다.

위 내용은 gitee에 vue 프로젝트를 배포하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!