vite 의 설정 파일( vite.config.js )의 기본설정

 

 

Vue를 인스톨하면 vite 가 기본설정으로 vite.config.js 파일이 자동 생성된다. 

 

아래 코드에서 port 를 임의지정해주기 위해서 server 구조만 추가로 작성하였고 나머지는 기본설정에 포함된다 

 

vite.config.js 설정을 기반으로 Vite의 번들링 과정을 알아보자 !! 

 

 

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  server: {
    port: 3000,
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

 

 

 

 

 

플러그인(plugins) 

plugins: [
  vue(),
  vueDevTools()
]

• vue()  : Vue 파일을 처리하도록 설정. '.vue' 파일을 js 코드로 변환해줌
• vueDevTools() : Vue  개발 도구를 사용 가능하게 설정 

 

 

Alias 설정

resolve: {
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url))
  }
}

• '@'를 src 디렉토리로 매핑하여, import  경로를 짧게 사용할 수 있음
  • './src/components/test.vue' -> '@/components/test.vue'
• 번들링할 때도 이 경로가 자동으로 변환됨 

 

 

Vite 의 번들링 방식

 

• HMR(Hot Module Replacement) 가능
  • 개발할 때 코드 변경사항이 있을 경우 즉시 반영(HMR) 
  • import 문을그대로 유지한 채 브라우저에서 src 폴더 파일을 개별적으로 요청해서 사용함