vite 절대경로 설정하는 법

Vite를 사용할 때 '@/components/Helloworld.vue' 이런 식으로 경로를 설정하고 싶을때 사용하는 방법입니다.
javascript는 vite.config.ts만 설정해줘서 손쉽게 가능합니다.

 

이 방법은 vite를 사용하는 react, vue, svelte 등 모든 프레임워크에서 사용가능합니다.

 

Javascript

vite.config.js

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

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

Typescript

Typescript는 tsconfig.json, vite.config.ts 둘 다 설정해주어야 합니다.
tsconfig.json에도 절대경로를 사용한다고 알려줘야 합니다.

 

일단 @types/node 가 설치되어 있어야 합니다.

tsconfig.json

{ 
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

vite.config.ts

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

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

위의 방법처럼 수동으로 설정하거나 혹은
vite-tsconfig-paths
위 모듈을 이용하면 간단하게 절대경로를 사용할 수 있다고 합니다.

 

 

 

 react 절대경로, vue 절대경로, svelte 절대경로