Vue.js에서 만든 SPA를 GitHub Pages에 게시

SPA 만들었다! 하지만...



Heroku에 배포하면 오류가 발생하고 해결책도 잘 모릅니다.
조사해 보면 GitHub Pages에서도 SPA 공개할 수 있는 것 같으니까 그곳에서 해보자는 것이 되었습니다.
조금 막힌 적이 있었기 때문에 메모로 남겨 둡니다.
실수 등이 있으면 가르쳐 주시면 다행입니다.

환경



Vue CLI v3.3.0
yarn v1.13.0

vue.config.js 편집



기본적으로 vue.config.js는 없으므로 프로젝트 디렉토리 바로 아래에 만듭니다.
참고로 한 사이트: htps : // cぃ. 아 js. 오 rg / 곤후 g / # g ぉ 바 lc ぃ - 콘후 ぃ g

vue.config.js
module.exports = {
  publicPath: "./",
  assetsDir: "",
  outputDir: "dist"
}

배포



gh-pages라는 도구를 사용하여 배포합니다.
$ yarn add gh-pages --dev

설치 후 package.json을 다시 씁니다.

package.json
{
  //省略
  "scripts": {
    "deploy": "gh-pages -d dist" // 追加
  }
  //省略
}

그 후 yarn build 하고 yarn deploy 를 한다.

GitHub에서 공개 설정



원격 리포지토리 설정 화면으로 이동하여 이미지와 같이 gh-pages branch를 선택합니다.

이것으로 반영하는데 시간이 걸립니다만 (나의 경우) 제대로 공개할 수 있었습니다.

좋은 웹페이지 즐겨찾기