최근에 프론트엔드 코드를 좀 더 작업하고 있었는데, import 경로가 이렇게 생긴 게 정말 지겨워졌어요

../../foo/bar/etc

정말 끔찍하죠! 디렉터리 구조를 조금만 바꿔도 금방 다 깨질 것 같더라고요. 이대로는 안 되겠어요!

인터넷에서는 tsconfig.json에 아래 내용을 추가하라고 하더라고요

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

이렇게 하니 에디터의 물결선은 사라졌는데, 빌드는 여전히 실패했어요. 참고로 저는 Tauri와 Vite를 쓰고 있어요.

알고 보니 문제는 Vite 때문이었어요. 이런 별칭을 지원하려면 vite.config.ts에도 설정을 추가해야 하더라고요

먼저 플러그인을 설치해요

npm install --save-dev vite-tsconfig-paths

그리고 설정에 추가해요

import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig(async () => ({
  plugins: [tsconfigPaths()], // I imagine you have other plugins

  // you probably have a bunch more here too
}));

끝이에요! 이제 import 경로가 깔끔해졌어요