vue router 사용한 vue 프로젝트 github page 배포하기

깃허브에 파일 올리기

https://cystory.tistory.com/48

GitHub에 파일 올리고 Pages 배포하기

 

먼저 위와 같은 방법으로 깃허브에 파일을 올려줍니다.

 

깃허브 페이지 배포같은 경우에도 위 방법과 비슷한데

 vue 같은 경우에는 깃허브 페이지 배포할때 방법이 조금 다릅니다.

 

vue.js > 깃허브 페이지 배포하기

1. 해당하는 github 저장소의 설정 > Pages > Branch > None 에서 master 로 변경 및 Save

 

 

 

 

2. 해당 프로젝트 터미널을 열고 gh-pages 패키지를 설치합니다.

npm install gh-pages --save-dev

 

 

3. 프로젝트에 있는 package.json 파일을 열어 "homepage" 주소를 추가합니다.
형식은 http://{사용자 이름}.github.io/{저장소 이름}로 작성합니다.
  *주소 제대로 확인하세요*

"homepage": "http://cheryea.github.io/react-github-pages"

 

 

4. script 부분에 predeploy, deploy 를 추가합니다.

"scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
}

 

이 부분이 react 와 vue 가 차이가 있습니다.

build 를 마치면 나오는 빌드된 폴더 명이 react는 build, vue는 dist 이기 때문에
build가 아니라 dist를 페이지에 배포해 주어야 합니다.

 

 

5. vue.config.js 파일에 module.exports 추가

 

vue.config.js 파일에

module.exports = {
  publicPath: "/레파지토리명/",
};

 

해당 내용을 추가해 주어야 합니다.

해당 내용을 추가해 주지 않으면 배포는 되지만 index가 read.md 가 뜹니다.

 

 

+vue router 을 사용하시는 분들은

router index.js 의 createRouter 부분도 레파지토리명을 추가해주어야 합니다.

 

const router = createRouter({
  history: createWebHistory("/레파지토리명/"),
  routes,
});

 

publicPath 부분을 바꿔주었고 기본 "/" 이 아닌 "/레파지토리명/" 으로 index 경로가 바뀌었기 때문에
수정해주어야 하는 부분 같습니다.

 

 

6. 저장하고 터미널창을 열어 npm run deploy를 실행합니다

 

 

7. (1) 번째 방법에서 Master로 바꿨던 부분을 gh-pages로 변경 및 Save

 

 

8. 배포완료

오른쪽 사이드에 github-pages (Active) 가 되었다면 완료.
github-pages 클릭 후 View deployment 를 클릭하면 배포 페이지가 나오게 됩니다.

 

 

참고하세요

- github

https://github.com/cheryea/vue-minigame

GitHub - cheryea/vue-minigame

 

- youtube

https://www.youtube.com/watch?v=Yiskxox-e2c