vue-cli로 만든 앱을 Github Pages에 배포

1. 평소와 같이 vue 프로젝트 만들기

$ vue init webpack <projectname>

2. config/index.js에서 build 메소드 편집

dist/를 docs/로 바꾸기 (2 개소)

assetsPublicPath를/에서 ./로 바꾸기

  build: {
    // Template for index.html
-    index: path.resolve(__dirname, '../dist/index.html'),
+    index: path.resolve(__dirname, '../docs/index.html'),

    // Paths
-    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsRoot: path.resolve(__dirname, '../docs'),
    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: './',

3. 빌드하기

$ mkdir docs
$ npm run build

4. 보통 Github에 배포

$ git add -A
$ git commit -m "<commit-message>"
$ git push origin master

5. Github 측에서 배포 설정

설정 탭에는 Github Pages 항목이 있습니다.



Source를 master branch /docs folder로 한다.

6. 확인

https://あなたのGithub垢 .github.io/レポジトリの名前/를 체크.

예를 들면, 이런 URL: htps : // msrks. 기주 b. 이오/보아 rd가 메마나게 r/