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

Question

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

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

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

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

Answer 1

정상적으로 빌드된 것으로 보입니다. 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)

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