최근 프론트엔드 코드를 좀 더 작업하고 있었는데, 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 경로가 깔끔해졌다