Vue.js 설치 및 서버 배포

안녕하세요. 오틸라 입니다.

 

이번에 내부적으로 개발중인 웹사이트에 vue.js를 적용해볼가 하여, 

개발PC에 vue 환경설정을 시작해봅니다.

 

일단 nodejs가 버전이 오래되어서 최신버전부터 깔고봅니다.

 

https://nodejs.org/ko

Node.js

 

 

 

설치파일 다운로드 받고 실행하면 됩니다~

 

 

커맨드창에서 node만 쳐서 버전이 나오는지 확인해보고, 만약 안된다면 재부팅 한번 해주세요.

 

 

npm install -g @vue/cli

를 커맨드창에 입력하여 설치해줍니다.

 

vue --version을 입력하여 잘 설치되었는지 확인합니다.

 

 

이제 그럼 test 프로젝트를 생성하고, 로컬에서 실행해보겠습니다.

 

반응형

 

 

저는 e드라이브에 vue라는 폴더를 만들고

거기서 커맨드창을 연 다음

 

vue create vuetest

 

라고 실행하여 프로젝트를 생성합니다.

 

생성이 완료된 후 폴더로 이동하여

 

npm run serve

 

를 입력하여, 서버를 실행하고,

 

브라우저에 localhost:8080을 입력하여 페이지가 열리는지 확인합니다.

 

 

이제 소스에서 Welcome to => Welcome 2로 문구 하나 변경해서 실시간으로 변경되는지 확인해봅니다.

 

 

 

로컬에서 잘 작동하는걸 확인했네요.

 

그럼, 이걸 웹서버에 올려서 동작하는지 확인해보겠습니다.

 

우선 빌드를 하고,

 

npm run build

 

빌드가 완료되면, dist폴더가 생기는데 이폴더의 소스를 전부 웹서버에 올려줍니다.

 

저같은 경우

 

php웹서버에 root폴더에서 vue폴더를 하나 생성해서 그곳에 dist폴더에 있는 파일을 전부 업로드하였습니다.

 

 

빌드된 index.html을 보면, 파일 경로가

"/js/chunk-vendors.acccd3fc.js"

"/js/app.29185852.js"

"/css/app.2cf79ad6.css"

모두 이렇게 되어 있습니다.

 

웹서버의 루트에 설치되었다면 문제 없지만, 저는 vue폴더아래 넣었기 때문에

"./js/chunk-vendors.acccd3fc.js"

"./js/app.29185852.js"

"./css/app.2cf79ad6.css"

 

이렇게 변경해주고 url을 브라우저에 입력하여 확인합니다.

웹서버에서도 정상적으로 띄워지는것을 확인하였습니다.

 

 

 

 

이상 오틸라였습니다.

건강하세요~