본문으로 건너뛰기
SoulLog

vite.config.js 마이그레이션 정리

4분 읽기
Vue.jsViteFrontend

용도: 빌드 설정 | 작업일자: 2024년 1월 11일

변경 사유

  • Vue3부터는 프로젝트 생성 시 기본적으로 빌드 도구로 Vite가 설치됩니다. (실제로 체감될 만큼 빠릅니다.)
  • Vite로 변경되면서 기존 package.json에서 설정한 스크립트 실행 명령어 다수가 Vite에 맞지 않습니다.
    • vue-cli-service → vite 명령어로 변경해야 합니다.

변경 시 고려사항

  • 기존 크루 어드민에서 사용 중인 명령어와 동일(또는 유사)하게 유지합니다.

변경 과정에서 확인된 사항

1. require 사용 불가 — import로 변경 필요

Vite 환경에서는 기본적으로 CommonJS의 require 사용이 불가합니다. 반드시 ES Module의 import로 받아와야 합니다.

// 크루 어드민 (기존)
const path = require('path')
const PACKAGE = require('./package.json')
 
// PMS (Vite 적용 후)
import path from 'node:path'
import PACKAGE from './package.json'

2. process 미선언 시 ESLint 에러 발생

기존 vue.config.js에서 환경 변수를 process.env 형태로 사용했는데, process를 명시적으로 선언하지 않으면 'process' is not defined ESLint 에러가 발생합니다.

process is not defined ESLint 에러 스크린샷

상단에 아래와 같이 import로 process를 불러와야 합니다.

import process from 'node:process'

3. 환경 변수에 VITE_ prefix 필수

환경 변수를 불러오려면 앞에 VITE_ prefix를 붙여야 합니다.

  • 매번 붙이기 번거롭다면 envPrefix 옵션에서 prefix를 변경할 수 있습니다.
  • 단, 빈 문자열로는 설정할 수 없습니다.
  • 관련 문서: Vite 공식 docs — envPrefix

변경점 — package.json scripts

// 크루 어드민 (기존 vue-cli-service)
"scripts": {
    "http": "vue-cli-service serve --mode development --public 0.0.0.0 --no-lint --port 7001",
    "serve": "vue-cli-service serve --mode development --host local.crew.sparkplus.co --port 443 --https --no-lint",
    "build": "vue-cli-service build --mode production",
    "build-staging": "vue-cli-service build --mode staging",
    "build-devserver": "vue-cli-service build --mode devserver",
    "copy": "node build/build.copy.js production",
    "copy-staging": "node build/build.copy.js staging",
    "copy-devserver": "node build/build.copy.js devserver",
    "lint": "vue-cli-service lint"
},
 
// PMS (Vite 적용 후)
"scripts": {
    "http": "vite --mode development --port 7101",
    "serve": "sudo vite --mode development --host local.crew.sparkplus.co --port 443",
    "build": "vite build --mode production",
    "build-staging": "vite build --mode staging",
    "build-devserver": "vite build --mode devserver",
    "copy": "node build/build.copy.js production",
    "copy-staging": "node build/build.copy.js staging",
    "copy-devserver": "node build/build.copy.js devserver",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},

주요 변경 내역은 다음과 같습니다.

  1. --public 옵션 제거: Vite에서 해당 문법이 사라졌습니다.
  2. npm run serve에 sudo 추가: 443번 포트는 관리자 권한이 필요하여 sudo 명령어를 추가했습니다.
  3. --no-lint, --https 옵션 제거: 두 옵션 모두 Vite에서 문법이 제거되었습니다.

참고자료