vite에서 절대 경로 설정하기

vite.config에서 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'),
      'components': path.resolve(__dirname, 'src/components'),
      'assets': path.resolve(__dirname, 'src/assets'),
      // 추가적인 경로 설정 가능
    }
  }
});

 

이런 방식으로 사용하면 된다

import React from 'react';
import Logo from 'assets/logo.png'; // src/assets/logo.png
import Navbar from 'components/Navbar'; // src/components/Navbar.jsx

const Header = () => (
  <header>
    <img src={Logo} alt="Logo" />
    <Navbar />
  </header>
);

export default Header;

 

추가적으로 ts 파일을 사용한다면, tsconfig.json에서도 경로 별칭을 설정해야한다

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