[Vue] build & github pages 배포

vue로 작업한 사이트는 build용 파일을 생성 후 올려야 합니다.
왜냐면 . vue 파일은 브라우저가 해석할 수 없어서, HTML CSS JS 파일로 변환해줘야 하기 떄문입니다.

1. build

npm run build

// or
yarn build

Vue 프로젝트에서 터미널을 연 후 위의 명령어를 입력합니다.
개발 도중 심각한 에러가 있다면 build되지 않습니다.
명령어가 제대로 실행되면 /dist 라는 폴더가 하나 생성됩니다.

build 시 파일명은 무작위로 생성해줍니다.
dist파일을 모두 서버에 올리면 됩니다.

2. github pages

자세한 설명은 생략한다

Q2. 왜 특정 URL을 입력하면 404 페이지가 뜨나요?

test.github.io/detail/1
로 접속하면 제대로 된 페이지가 뜨지 않습니다.
왜냐면 주소창에 뭔가를 입력하는것은 서버에게 ‘/deatil/1’ 페이지 주세요~ (get 요청) 하는 행위이기 때문입니다.

그렇기 때문에 서버에서
누군가 test.github.io/ 로 접속하면 vue메인페이지로 보내주세요~ 라고 개발을 해놓던가
URL에 # 기호가 붙는 hash mode를 사용하면 됩니다.

Q4. build 할 때 압축 시키지 말고 남기고 싶은 파일은?

vue로 작업을 할때 ./ 경로로 첨부한 이미지, js파일들은 전부 압축되고 이름이 변합니다.
이름이 변하지 않게 하고 싶으면 public 폴더 안에 넣고 build를 해야합니다.
그럼 build 하고 나서도 그대로 루트경로에 파일이 남아있습니다.
(개발 시 그런 파일들을 이용하고 싶으면 public 폴더에 보관하고, ./ 경로가 아닌 / 경로로 import 하면 됩니다.)