[Vue] github pages 특정 폴더만 배포 시키기 (subtree), 경로설정

vue.config.js 수정

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'production' ? '/vue-stagram/dist' : '/',
  assetsDir: './',
})

.gitignore 수정

vue-cli로 프로젝트를 생성하고 원격 저장소에 푸쉬하게 되면 .gitignore에 명시된 폴더나 파일을 제외한 모든 폴더와 파일이 원격 저장소에 저장되게 된다.
만약 이 프로젝트를 원격 저장소에 저장시키고 데모 페이지 또한 배포하려는 상황이라면 이 방법을 사용하여 쉽게 빌드 된 페이지를 배포할 수 있다.

vue-cli로 프로젝트를 만들면
.gitignore 파일에서 다음과 같이 /dist 파일을 주석 처리 하거나 없앤다.
(vue-cli로 프로젝트를 만들면 기본적으로 ignore 되어있다.)

...

# /dist

...

그런 다음 명령어를 입력해서 파일과 폴더들을 추적 가능케 한다.

git add .
git commit -m 'initial'

그 후, git subtree를 이용하여 dist 폴더만 gh-page 브랜치에 배포시킨다.

git subtree push --prefix dist origin gh-pages

새로운 브랜치가 만들어지고 원격 저장소에 이 브랜치가 푸쉬된다.
package.json에 스크립트로 등록해서 사용할 수도 있다.

"gh-deploy": "git subtree push --prefix dist origin gh-pages"

…

npm run gh-deploy

or

yarn gh-deploy

두번째 푸시부터 제대로 안 될 경우
아래 명령어로 삭제 후 다시 push 한다.

git push origin `git subtree split --prefix dist master`:gh-pages --force

hash mode를 사용할 경우 router-link사용!

<router-link class="nav-link" :to="`/detail/${num}/comment`">Comment</router-link>