Cloud9에서 vue-cli 환경 만들기

최근 개발은 명확하게 cloud9 에서 하고 있습니다.

Cloud9 편리하네요.
환경을 구축 할 필요가 없으므로 즉시 시도 할 수 있습니다.
클라우드이므로 PC만 있으면 어디에서나 같은 환경에서 바로 실행할 수 있습니다.

게다가 현재의 현장에서는 프록시 물려져 GitHub등에 push 할 수 없습니다만, Cloud9에서는 그렇게 관계없이 push 할 수 있습니다

Cloud9에서 vue-cli 사용

VueJS의 병아리를 만드는 vue-cli를 Cloud9에서 사용하려고하면 조금 빠졌기 때문에 비망록도 겸해

cloud9의 workspace는 Node.js를 선택합니다.

vue-cli 설치

우선 vue-cli 자체를 설치합니다.

npm install -g vue-cli

vue.js 프로젝트 만들기

그런 다음 현재 디렉토리에 vue.js 프로젝트를 만듭니다.

vue init webpack .
npm install

서버 시작하기

npm run dev

기본 상태에서 시작하면 다음 화면이 나타나 정상적으로 표시되지 않습니다.

Cloud9에서 서버를 시작할 수 있도록 수정

Cloud9에서는 포트나 IP 주소의 설정을 변경할 필요가 많이 있어, 이번 vue-cli도 그 대상이었습니다.

build/webpack.dev.conf.js의 24행 부근을 다음과 같이 수정합니다.

devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: true,
  hot: true,
  compress: true,
- host: process.env.HOST || config.dev.host,
- port: process.env.PORT || config.dev.port,
+ host: '0.0.0.0',
+ port: '8080',
+ disableHostCheck: true,

서버 시작하기

npm run dev

이 상태에서 서버를 시작하면 다음 페이지가 표시되어 정상적으로 시작할 수있었습니다.


이상