Vite 와 TypeScript를 쓰는 환경에서는 문서입니다.
프로젝트를 진행하면 작업 공간내에 존재하는 여러 컴포넌트들을 import 해야하는 순간들이 자주 있습니다. 이러한 순간에 다른 설정을 해두지않으면 프로젝트는 상대경로를 통해 컴포넌트를 import 해옵니다.
import AppComponent from "../../AppComponent.vue"
JavaScript
복사
파일을 불러오는 방법과 과정에선 아무런 오류가 발생하지않습니다. 또한 IDE에서 경로 변경시 파일을 추적하여 변경해주기도 합니다. 하지만 개발자의 시선에서 봤을땐 전혀 명확해보이지 않습니다. (가독성이 떨어집니다.)
다음과 같이 바꿔보도록 하겠습니다.
import AppComponent from "@/components/AppComponent.vue"
JavaScript
복사
변경 뒤 AppComponent 파일이 어디 경로에 존재하는지 파악하기 쉬워졌습니다.
프로젝트의 “src” 를 “@”로 aliasing
1. vite.config :
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [
{ find: "@", replacement: "/src" }
],
},
})
JavaScript
복사
2. tscofing :
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
},
// ...
}
JavaScript
복사