vue 3 & github pages 배포

1. vue3 프로젝트를 create 한다.

 

2.github repogitory를 만들고 vue project와 remote한다.

 

3. vue.config.js 파일을 만들고 (경로 :  '/' )

 

  module.exports = {

  publicPath: process.env.NODE_ENV === 'production' ? '/깃헙 레파지토리 이름/' : '/'

  }

코드를 넣고 저장한다.

 

4.deploy.sh를 만들고 아래 코드를 붙여넣는다. ( 경로: '/' )

#!/usr/bin/env sh

 

# abort on errors

set -e

# build

npm run build

# navigate into the build output directory

cd dist

# if you are deploying to a custom domain

# echo 'www.example.com' > CNAME

git init

git add -A

git commit -m 'deploy' #

if you are deploying to https://<USERNAME>.github.io

# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# if you are deploying to https://<USERNAME>.github.io/<REPO>

# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

 

4.5 위 코드에서 git push 부분의 username/repo 부분-> 자신의 정보를 입력한다.

 

5. github.com/settings/keys

GitHub: Where the world builds software

에 접속 후 ssh keys를 등록한다. ( 구글에 github ssh key로 검색하면 자료가 많습니다. )

 

6. 

    

를 선택 후 sh deploy.sh 명령어를 입력한다.

 

7. 자신의 github에 로그인하고 배포하려는 레파지토리의 settings -> pages에 접속

 

 

위의  이미지와 같다면 몇분 후 배포완료 !