Vue.js에서 만든 SPA를 GitHub Pages에 게시
2432 단어 YARNvue-cli3Vue.jsgithub-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.jsmodule.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
를 선택합니다.
이것으로 반영하는데 시간이 걸립니다만 (나의 경우) 제대로 공개할 수 있었습니다.
Reference
이 문제에 관하여(Vue.js에서 만든 SPA를 GitHub Pages에 게시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sayuprc/items/3164ac0a1fe84273e652
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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.jsmodule.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
를 선택합니다.
이것으로 반영하는데 시간이 걸립니다만 (나의 경우) 제대로 공개할 수 있었습니다.
Reference
이 문제에 관하여(Vue.js에서 만든 SPA를 GitHub Pages에 게시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sayuprc/items/3164ac0a1fe84273e652
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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
를 선택합니다.
이것으로 반영하는데 시간이 걸립니다만 (나의 경우) 제대로 공개할 수 있었습니다.
Reference
이 문제에 관하여(Vue.js에서 만든 SPA를 GitHub Pages에 게시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sayuprc/items/3164ac0a1fe84273e652
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Vue.js에서 만든 SPA를 GitHub Pages에 게시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sayuprc/items/3164ac0a1fe84273e652텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)