Vue-cli로 작성한 프로젝트 github-page로 배포하기

Vue-cli로 프로젝트를 생성하여 github-page로 배포하려고 하는데 안되서 찾아보니 잘 정리된 자료가 있었다.
master브랜치와 gh-page브랜치로 배포하는 방법도 아래 참고자료에는 설명되어 있다.
아래 설명은 docs 폴더로 배포한 것.

master branch /docs 폴더로 배포하기

1. npm run build

cmd 화면
프로젝트 밑에 /dist 폴더가 생성된다.

2. dist라는 이름의 폴더를 docs로 변경한다.

atom 화면1

3. docs/index.html에서 script태그의 link태그의 src 속성에 /로 시작하는 부분을 모두 삭제한다.

atom 화면2

4. master브랜치에 push한다.

5. github의 repository setting으로 가서 github-page의 세팅을 master branch/docs folder로 변경한다.

github setting 변경

6. 완성

완성

[참고 한 자료]

https://medium.com/@mwolfhoffman/deploying-to-github-pages-with-vue-webpack-cli-5b2ba17f14a0