먼저 다음과 같이 vite.config.ts
에서 절대 경로를 잡아준다.
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
"@components": fileURLToPath(
new URL("./src/components", import.meta.url)
),
},
},
tsconfig.json
또는 tsconfig.app.json
에도 다음과 같이 동일하게 경로를 잡아준다.
"compilerOptions": {
"composite": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
"@components/*": ["./src/components/*"]
}
}
그리고 import를 통해 경로를 찾으려 하지만 다음과 같은 오류가 발생한다
Could not find a declaration file for module '예시경로/MainHeader.vue'. '예시경로/MainHeader.vue.js' implicitly has an 'any' type.ts(7016)
vue 파일을 연결했지만, vue.js를 찾는다.
typescript 환경에서는 <script setup lang="ts">
와 같이 lang="ts"
를 설정해줘야지 js 경로를 인식한다.
호출단과 호출되는 파일 모두에 lang 설정을 함으로써 해결할 수 있다.