Vue - 사이트를 Github Pages에 배포하기 방법1

 

Vue.js로 만든 사이트를 다른사람도 볼수 있도록 배포를 해보자.

---

 

Point. vue파일들을 그대로 올리는 것이 아니고, build를 실행해서 생성된 파일을 올려야 한다.

 

 

깃허브 로그인

https://github.com/

GitHub: Let’s build from here

깃허브에 로그인하자.

페이지생성이 아직 안되어있으면 Page를 만들자.

 

 

Github Page 만들기 : Jessi's Note (tistory.com)

Github Page 만들기

 

 

파일준비

build 실행

build 용 파일을 생성 하고 올려야 한다.

웹브라우저는 html, css, js 세개의 언어만 해석 가능하기 때문에 build를 해주면 html, css. js로 변환을 해주는 것이다.

 

npm run build

 

 

★ dist 생성 됨 ★

> html, css, js파일이 있음

 

 

 

---

방법.1

dist 업로드

'dist' 폴더 안의 내용만 올리는 것이다.

 

Repository 접속

'Add File'을 눌러 위에서 생성한 'dist' 폴더 안의 파일만 업로드 한다.

 

 

 

'dist' 폴더안의 파일을 드래그해서 넣고 'Commit Changes' 버튼을 눌러주면 끝

 

 

---

결과확인

사이트에 접속 해보자.

생성된 페이지가 나오는것을 확인 할 수 있다 ~!! 

 

 

 

 

---

다른방법

Vue - 사이트를 Github Pages에 배포하기 2 : Jessi's Note (tistory.com)

Vue - 사이트를 Github Pages에 배포하기 2