[Vue웹베포] Vue로서 만든 프로젝트 웹베포해보기

Vue로 열심히 만든 내 프로젝트를 웹베포로서 보여주고 싶으면 App.vue 파일 그대로 올리는 게 아니라,
build용 파일을 생성하신 후 그 파일을 올려야한다.
웹브라우저는 HTML CSS JS 이 세 개의 언어만 해석할 수 있습니다.
브라우저는. vue파일 그런 거 읽을 줄 모릅니다.
그러므로 build라는 걸 해주시면 브라우저 친화적인 HTML CSS JS 파일로 바꿔줍니다.

 

 

※ 단, 나에게 웹 서버를 가지고 있을 경우?

Vue는 HTML을 이쁘게 만들어주는 툴일 뿐
그래서 빌드를 하면 HTML 파일이 하나가 뿅 나오는데
그걸 서버에서 전송하면 됩니다. 예를 들어
"우리 사이트 메인페이지로 접속하면 빌드해서 만들어둔 HTML 파일 보내주세요"
라고 서버에 API를 짜기.

 

Vue 프로젝트를 build 하는 법

새 터미널 열기

 

npm run build

 

npm run build

yarn build

둘 중 하나를 입력하시면 됩니다.  

개발 도중 심각한 에러가 있다면 build는 되지 않습니다.

완료가 되면,  Vue 프로젝트 폴더 내에 dist라는 폴더가 하나 생성됩니다. 

 

- dist 폴더 

•   index.html, css파일, js 파일이 전부 담겨있습니다.
•   build 하면 파일 사이즈를 압축해 줍니다.
•   파일명도 무작위
•   여기 안에 있는 내용을 모두 서버에 올리기 

 

 

 

 

로그인한 후 한 개의 저장소를 만들어봅시다.

 

 

꼭! 본인아이디. github.io라고 입력하셔야 호스팅 받을 수 있습니다. 

 

 

dist 폴더 안의 내용물입니다. 

 

그 후 등록하기

 

 

 

본인아이디. github.io/서브경로에다가 발행하기

 

※ 주의!! 자유인 곳에 아무렇게나 적어도 되지만 뷰 프로젝트 파일에 써야 할 이름과 동일해야 합니다 ※

 

뷰 프로젝트 파일 오픈하셔서 vue.config.js라는 파일을 만들어줍니다.

 

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: "/vuvuvuvu", ※ 사실 이게 핵심!!
});

 

다시 npm run build 해줘야 함.

dist 안의 프로젝트 파일을 아까 만든 vuvuvuvu라는 이름의 repository에다가 업로드합니다. 

업로드되었으면 repository 설정으로 들어가서 main, / 경로로 github pages 발행하겠다고 저장해 줍니다.

 

프로젝트 완성!!!

완료된 페이지

 

 

1. 404 페이지

- 10분만 웹서핑 하고 오기
- ctrl + shift + r을 이용해 새로고침 해보기
- 발행한 주소/index.html까지 URL에 작성해 보십시오.
- 혹은 맨 처음 내 아이디. github.io라는 repository 생성하실 때
  아이디를 오류 대소문자 틀리지 말고 정확히 적으셔야 합니다. 
- 새로 만들기

 

2. 특정 URL을 입력하면 404 페이지

어쩌구.github.io/detail/1 이렇게 세부 페이지 URL을 주소창에 직접 입력하시면
찾는 페이지가 없어요~ 이렇게 404 에러가 날 수 있습니다.
왜냐면 주소창에 뭔가 입력하는건 서버에게 "/detail/1 페이지 주세요"~ 라는 요청을 하는 행위기 때문입니다.
이건 서버에서 "누군가 어쩌구.github.io/어쩌구 로 접속하면 Vue 메인페이지로 보내주세요~" 라고 
개발을 해놓으셔야합니다.
근데 github은 우리가 서버를 만지고 어찌할 수 있는게 아니고 그냥 HTML 파일 올린것만 샤락 보여주는 곳이기 때문에
사이트 메뉴에다가 페이지 이동버튼을 잘 만들어두시면 되겠습니다.
아니면 URL에 #기호가 붙는 hash mode를 라우터 코드짤 때 쓰면 해결될 수 있습니다.

 

3. 업데이트 사항이 생기면 배포 어떻게 하죠?  

- build 또 하시고 그 파일 그대로 다시 업로드하시면 됩니다.
- build 할 때마다 CSS, JS 파일 명이 dist 폴더 내에 무작위로 다시 생성됩니다.
- 새로 배포할 때마다 사이트 방문자들은 새로운 CSS, JS 파일을 이용할 수 있습니다. 

 

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

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

 

 

5. 서버에 올렸는데 왜 접속하면 이상한 페이지가 나오거나 일부 img, css파일이 로드가 안 되는 것이죠?

- 기존에 내 아이디. github.io가 이미 있는 경우 다시 올려버리면 github pages가 가끔 이상해집니다.
- 새로 서브경로로 repository를 만들어서 올려보십시오. 서브폴더에 배포하려면 위의 설정을 따라줍시다.
- 그전에 당연히 build 할 때 에러 안나 셨겠죠 
- 배포한 페이지가 안 나오면 크롬개발자도구 열어서 index.html이 쓰고 있는 css, js, img 파일들의 경로가 제대로 되어있는지 체크해 보도록 합시다.