[Vite] ⚡ Vite 경로 설정.

목차

Vite 경로 설정하기

Vue, React를 비롯한 SPA 프로젝트를 작성하다 보면, 밑의 import 문법 같이 경로가 점점 깊어지는 현상이 일어나게 된다.

TypeScript

import Slide from '../../components/Slide/Slide';

그렇다면 Vite로 만든 TypeScript 프로젝트에서 깔끔하게 import 하기 위해서는 어떻게 해야 하는지 포스팅해보겠다.

---

Vite.config.ts 작성하기.

Vite.config.ts 수정.

TypeScript

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: "@lib", replacement: "./lib" },
      { find: "@data", replacement: "./data"},
      { find: "@components", replacement: "./components" },
    ],
  },
});

resolve alias에 배열로 찾을 경로와 바꿀 경로를 작성합니다. ./components는 @components로 변경되고 ./lib는 @lib로 변경 가능합니다.

---

Tsconfig.json

JavaScript

{
  "compilerOptions": {
    ...{options},
    "baseUrl": ".",
    "paths": {
      "@lib/*": ["lib/*"],
      "@data/*": ["data/*"],
      "@components/*": ["components/*"]
    }
  },
  "include": ["src", "**/*.ts", "**/*.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

paths와 baseUrl 부분이 중요합니다. baseUrl 은 말그대로 baseUrl의 의미를 가지며, 위와 같은 경우 ../../components/는 @components/와 같은 의미가 됩니다.

 

작성이 완료되었다면 경로를 다음과 같이 사용할 수 있습니다.

TypeScript

import Slide from '@components/Slide/Slide';

---

Vite-tsconfig-paths 플러그인

vite.config.ts에서 경로를 수정하는 것도 가능하지만 위에 예시와는 다르게  vite-tsconfig-paths를 설치하여 사용하는 것도 가능합니다.

 

위에 2번 항목처럼 tsconfig.json을 변경하였다면 vite-tsconfig-paths을 설치한 후 vite.config.ts을 다음과 같이 설정합니다.

TypeScript

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
})

이 경우에도 작성이 완료되었다면 import 문법을 다음과 같이 사용할 수 있습니다.

TypeScript

import Slide from '@components/Slide/Slide';

---

참고 문헌

• 1vite 절대 경로 설정하는 방법.