Vue 3.0 + Github Page

Github 페이지를 이용해서 Vue3.0 배포하는 방법

0. vue 글로벌 설치 및 노드 설치

1. vue 설치
   $ vue create ${project_name}

2. git repository 설정 (public, 레포지토리 이름은 project_name 으로 설정)

3. git remote 와 연결
   $ git init
   $ git add README.md
   $ git commit -m ":tada: First Commit"
   $ git remote add origin https://github.com/`${user_name}`/`${project_name}`.git
   $ git push -u origin master

4. Root 폴더에 vue.config.js 만들어 줌
   $ touch vue.config.js

5. vue.config.js 에 publicPath, outputDir 설정

module.exports = {    
 publicPath: process.env.NODE_ENV === 'production'
   ? '/`${project_name}`/'
   : '/',
  outputDir: 'docs',
}

6. github repository -> settings -> GitHub Pages -> Source를 master/ docs 로 변경후 save

7. $ npm run build

8. $ git add . / git commit -m "${commit_contents}" / git push

9. ${user_name}.github.io/${project_name}/ 에서 App.js 확인 가능