[Vue 3] Vite 기반의 Vue 개발 2

이번 포스트에서는 Vite이용해서 개발한 application 대상으로 실행할 수 있는 script 에 대해서 살펴보자.

 

script 실행

이제 제공되는 스크립트들을 사용해보자.

npm run dev

애플리케이션을 실행하기 위해서는 npm run dev를 사용한다. 이 명령은 vite라는 스크립트를 실행하는데 vite의 옵션을 아래와 같이 확인할 수 있다.

quietjun@quietjun vuetodo % npx vite –help
. . .

Options:
  --host [host]           [string] specify hostname
  --port <port>           [number] specify port
  --https                 [boolean] use TLS + HTTP/2
  --open [path]           [boolean | string] open browser on startup
  -m, --mode <mode>       [string] set env mode
  -h, --help              Display this message

npm run dev를 실행하면 내장 서버를 통해서 application이 동작한다.

quietjun@quietjun vuetodo % npm run dev

  vite v2.9.13 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 102ms.

http://localhost:3000을 브라우저로 요청하면 드디어 Vue application의 동작을 확인할 수 있다.

 

npm run lint

lint를 이용하면 소스코드의 formatting을 처리할 수 있다.

만약 현재 .eslintrc.cjs 파일의 rule에 tabWidth:2, useTabs:true와 같이 설정되어있는 상황에서 아래 왼쪽 그림 같이 코드가 작성되어있다면 오류 상황이다. tab이 아닌 공백으로 indent가 작성되어있기 때문이다. 이때 npm run lint 를 실행해주면 우측 그림처럼 변경된다. format을 자동으로 맞추는 것이다.

코드를 작성한 후 배포하기 전에 lint 작업을 처리해주는 것이 권장된다.

 

npm run build

npm run dev는 개발 과정에서 application이 잘 동작하는지 확인해보기 위한 방법이지 실제 서버에 배포하는 과정은 아니다. 실제 배포를 위해서는 npm run build를 이용해서 .html, .css, .vue 파일등 여러가지 파일로 작성된 application을 .html 형태로 build 한 후 서버에 배포해야 한다.

build의 기본 경로는 dist 이며 --outDir을 이용해서 경로 변경이 가능하다.

quietjun@quietjun vuetodo % npm run build

> vuetodo@0.0.0 build
> vite build

vite v2.9.13 building for production...
✓ 12 modules transformed.
dist/assets/logo.da9b9095.svg    0.30 KiB
dist/index.html                  0.42 KiB
dist/assets/index.68e1f379.css   1.83 KiB / gzip: 0.65 KiB
dist/assets/index.3541e407.js    55.43 KiB / gzip: 22.25 KiB

 

결과로 생성된 dist 내부의 파일들을 원하는 서버로 배포해주면 개발이 완료된다.!