Vue-cli Github 배포 방법

1. 아래 명령어를 통해 브랜치를 생성한다. 

* --orphan 은 독립적인 브랜치를 만들기 위해 사용.

git checkout --orphan gh-pages

2. 프로젝트 폴더 루트 위치에 vue.config.js 파일을 생성한다.

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}

/my-project/ 는 Github 배포할 저장소의 이름이 들어가야 한다.

 

3. .gitignore 파일을 열어서 '/dist' 라고 쓰여진 라인을 찾아서 주석처리한다. (ignore되지 않도록)

4. npm run build 명령어 실행 

5. 빌드 후 아래의 명령어를 실행

git add dist && git commit -m "Initial dist"

SUBTREE : 상위 저장소에서 하위 저장소를 가질 수 있으며, 마치 하나의 저장소처럼 관리하도록 도와주는 기능.

git subtree push --prefix dist origin gh-pages

push 후 GitHub Settings -> GitHub Pages -> gh-pages branch 선택 후 배포된 페이지 확인.