Q. vue cli 3 로 build 했는데 렌더링이 안 돼요

기본 아바타 costard 2019. 01. 22. 조회수 595


vue cli 2 같은 경우 dist 폴더에 build.js 파일 하나만 생겼는데

vue cli 3 에서는 dist 폴더에 css/fonts/img/js 폴더, index.html 파일 까지 생기더라고요


그래서 dist 폴더 안에 파일 전체를 배포하면 될 것 같아서 index 파일 열어보니 빈 화면이 나오네요..

심지어 index.html 파일 css js 경로에 따옴표도 없고 좀 엉망인것같아요 제가 셋팅을 잘못했는지

공유하고 보상받기 ♥︎
댓글 0

1개의 답변이 있습니다.

질문자 & 큐레이터 채택
비매스터 답변자인증
OpenSG 수석 컨설턴트 2019. 01. 23 100%의 채택

정상적으로 빌드된 것으로 보입니다. Vue, React, Angular 와 같은 녀석들은 목표가 SPA 앱을 만드는 겁니다. SPA(Single Page Application) 은 하나의 HTML 파일이 바로 앱인 경우입니다. 그리고 Client Side Rendering 즉 자바스크립트 코드를 이용해 Rendering을 합니다.

따라서 서버에서는 하나의 HTML 파일과 몇개의 js 파일, css 파일을 브라우저로 응답하면 됩니다. UI는 js 파일의 코드가 실행되면서 만들어줍니다. dist 디렉토리의 index.html을 실행해보세요. live-server를 이용하면 더욱 간단히 테스트할 수 있습니다.

npm install -g live-server
cd ./dist
live-server

배포할 때는 dist 디렉토리 내의 파일을 다른 웹서버에 호스팅하시면 되는 겁니다.

추가로 다음 키워드에 대해 좀 더 학습해보세요.

  • SPA(Single Page Application)

  • CSR(Client Side Rendering)

그나저나 똑같은 질문을 두개나 올리셨네요.

댓글 0