쏘니의 개발블로그

실행 모드

vue cli 에는 기본적으로 3개 모드가 있다. vue cli 뿐 아니라 다른곳에서도 마찬가지.

1) development, 2) production, 3) test

그 외에 사용자가 정의한 모드를 추가 할 수 있다.

사용자 정의 모드

 // 최상단 경로 /package.json

"scripts": {
  .. 생략
   // local 로컬 모드 추가
  "local": "vue-cli-service serve --mode local",
  "mymode": "vue-cli-service serve --mode mymode", // 임의로 생성
   .. 생략
},

> npm run local
> npm run mymode

로 정의된 모드를 실행할 수 있다.

환경변수

실행 모드에 따라 변수 설정을 달리 할 수 있다.

기본적으로 2개의 환경 변수 NODE_ENV, BASE_URL 이 있다.

그 외에 환경변수 파일을 만들어 사용자가 정의한 변수를 추가 할 수 있다.

환경변수들은 process.env 객체에 정의되어 있고, 어디서나

console.log(process.env);

로 변수 값을 확인할 수 있다.

NODE_ENV

앱이 실행되는 모드이다.

3개의 기본 모드 "development", "production", "test" 가 있고, 사용자 정의 모드를 추가 할 수 있다.

모드 별로 기본적으로 사용하는 명령어가 있다.

• development  ->  vue-cli-service serve
• test -> vue-cli-service test:unit
• production -> vue-cli-service build 와 vue-cli-service test:e2e

BASE_URL

vue.config.js의 publicPath 옵션에 해당하고 앱이 배포되는 기본 경로이다.

환경변수

환경변수 파일 생성방법

// 파일 경로: /.env.local, 파일은 반드시 루트 디렉토리에 생성해야 한다.

NODE_ENV = "local"

BASE_URL: "/"

VUE_APP_MYCONST = "아무변수 선언한거"

사용자 정의 변수 생성은 아래와 같이 생성한다.

VUE_APP_생성할변수명 = 값

환경변수 파일 룰

.env                # 모든 경우에 로드
.env.local          # 모든 경우에 로드 되지만 git 에 무시됨.
.env.[mode]         # 특정명의 모드에만 로드됨
.env.[mode].local   # 특정명의 모드에만 로드되지만 git 에 무시됨.

포트 변경

// /vue.config.js
module.exports = {
    devServer: {
        // 사용자 정의 환경 변수에서 VUE_APP_PORT가 있으면 사용하고
        // 없으면 3000 포트로 개발서버를 실행합니다.
        port: process.env.VUE_APP_PORT || 3000
    }
}

현재 실행하려는 모드가 local

npm run local 로 실행하고 .env.local 파일에 VUE_APP_PORT 변수가 있다면 해당 포트로 실행되고, 

정의된게 없다면 3000 포트로 실행하게 된다.

.env.local  

기본적으로 vue cli 로 프로젝트 생성시 .gitignore 파일에 .env.local 파일은 제외되어 있다.

해당 파일을 공유하려면 .gitignore 파일을 수정해야 한다.

// 파일 위치: /.gitignore

# local env files
.env.local
.env.*.local

참고문헌

https://cli.vuejs.org/guide/mode-and-env.html#modes

vue cli 2.X

// vue-cli 전역 설치
npm install -g vue-cli

프로젝트 생성

// vue init <template-name> <project-name>
vue init webpack my-project

//실행
npm install
npm run dev 로 실행

vue-cli 에서는 미리 세팅된 몇가지 템플릿을 제공한다.
제공되는 템플릿은 vuejs-templates 에 각각의 레퍼로 저장되어 있다.
vue list 명령어를 통해서 제공되는 템플릿 리스트를 확인할 수 있다.

vue cli 3.X

//설치
npm install -g @vue/cli

버젼으로 설치

npm install -g @vue/cli@^3.1.0
npm r -g vue-cli --지우고 다시 설치 

//시작하기
vue create my-project

//실행
npm run serve

//관리자 vue 페이지
vue ui

참고문헌

http://vuejs.kr/vue/vue-cli/2018/01/27/vue-cli-3/