jsconfig.json 파일 설정

타입스크립트를 사용하는 경우 tsconfig.json 파일에 jsconfig.json 설정 내용을 넣으셔야합니다.

하지만 타입스크립트를 사용하지 않는 경우, jsconfig.json 파일을 생성해서 설정해도 됩니다.

file의 절대 경로로 찾기 쉽게 아래의 설정과 같이 변환할 수 있습니다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./src/*"
      ],
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

위와 같은 절대 경로 설정을 하시면,

import AppHeader from './components/common/AppHeader.vue';

와 같은 상대 경로를 import AppHeader from '@/components/common/AppHeader.vue'; 절대 경로로 바꿀 수 있습니다.

즉, 앞의 파일 경로가 어떻게 되던지 @를 붙이고 src 디렉토리 하위폴더명을 바로 기술하면 됩니다.

다른 디렉토리에서 경로를 잡을 시 ../../ 와 같은 상대 경로를 절대 경로로 바꾸어 간소화하는 설정으로 이해하시면 될 것 같습니다.

 

 

 

 

https://code.visualstudio.com/docs/languages/jsconfig

jsconfig.json Reference

 

https://github.com/joshua1988/vue-til/blob/complete/jsconfig.json