[Vite] Vite에서 절대경로(absolute path) Alias 사용하기

Vite에서 절대경로로 Alias를 사용하려면 vite.config.js의 resolve.alias를 추가해 주어야 한다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';

export default defineConfig({
  plugins: [react()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    },
})

 

import는 아래와 같이 할 수 있다.

//test.js
alert('import!')

import "@/css/test"

...

import 결과

 

alias옵션의 자세한 옵션들은 아래를 참고하자

 

참고

https://ko.vitejs.dev/config/shared-options.html#resolve-alias

Vite