GitHub Pages 배포 후에, '/' 외에 다른 path 들을 인식하지 못하는 문제가 있음.

[Supergrammer]

    GitHub Pages 배포 후에, '/' 외에 다른 path 들을 인식하지 못하는 문제가 있음.

검색해 보니 react 의 router 에서도 같은 현상이 발생하는듯 함

Originally posted by @Supergrammer in https://github.com/Supergrammer/github-pages/issues/2#issuecomment-1368779217

[Supergrammer]

참고 ) https://huishun.medium.com/how-to-deploy-a-vue-js-application-with-dynamic-routing-on-github-pages-3d36f4644e54

[Supergrammer]

참고 ) https://morioh.com/p/a91478cff16f

[Supergrammer]

해결 방안

GitHub Page baseUrl 변경

• GitHub Page 리포지토리 이름을 github-pages 에서 supergrammer.github.io 로 변경
• vite.config.js 의 baseUrl 이 /<repository name>/ 으로 고정되어 있었는데, 리포지토리명이 변경되면서 라인 삭제
• package.json 에서 deploy script 변경

{
    "name": "github-pages",
    "version": "0.0.0",
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "predeploy": "vite build",
        "deploy": "cd dist && cp index.html 404.html && cd .. && gh-pages -d dist"
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^6.2.1",
        "@mdi/font": "^7.1.96",
        "gh-pages": "^4.0.0",
        "pinia": "^2.0.28",
        "vue": "^3.2.45",
        "vue-router": "^4.1.6",
        "vuetify": "^3.0.6"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.0.0",
        "vite": "^4.0.0"
    }
}

deploy 스크립트가 gh-pages -d dist 에서 cd dist && cp index.html 404.html && cd .. 부분을 추가

정상적으로 404 not found 페이지가 출력되고, 다시 한 번 redirection 을 하는 부분을 확인할 수 있음