[Vue.js] 상대경로 별칭(@, ~ 등) 사용해서 절대경로로 변경하기

외부 코드를 import 해서 사용할 때 늘 아래와 같이 상대경로를 통해 찾아와 사용했다.

import Header from '../../../Header';

이렇게 사용하다보니 프로젝트 규모가 커질수록 컴포넌트가 많아질수록 경로가 복잡해지고 코드도 지저분해졌다. 그렇게 늘 상대경로를 사용하다가 아래와 같은 경로를 발견했다.

import Header from '@/components/Header';

처음 봤을 때는 '어? 이 @는 뭐지??? 절대경로인거 같은데 어떻게 설정한거지???' 라는 생각을 했다. Vue/CLI를 사용해서 프로젝트를 만들고 개발을 했었기 때문에 이런 설정들을 바꿔볼 생각을 하지 않았었는데 공부를 하다보니 이러한 초기설정들이 중요하다는 걸 알게 되었다.

 

아무튼 위와 같이 상대경로를 절대경로로 변경하는 법에 대해서 포스팅해보겠다.

 

1. 일단 vue.config.js 파일로 들어간다.

보통 vue/cli를 이용해 프로젝트를 생성하면 webpack 기본 설정을 내부적으로 해주기 때문에 건들 필요가 없다. 하지만 경로를 변경하는 것은 webpack 설정을 변경하는 것이기 떄문에 내부 webpack 설정을 변경해줘야 한다. chainWebpack라는 옵션을 통해 내부 webpack의 설정을 변경할 수 있다.

 

2. 그런 다음에는 chainWepack에 변경할 경로를 등록해준다.

    chainWepack: config {
    config.resolve.alias.set('@router', resolve(`src/router`));
    config.resolve.alias.set('@layouts', resolve(`src/layouts`));
    },

위와 같이 등록할 경로를 등록해주면 절대경로를 사용할 수 있다.

 

3. jsconfig.json 파일에도 등록해준다.

하지만 저렇게만 등록하면 우리가 사용하는 툴에서 @만 입력했을 시에 자동완성이 뜨지 않는다. 그거는 우리가 등록한 경로를 에디터에 알려주지 않았기 때문이다. jsconfig.json 또는 tsconfig.json에도 똑같이 등록해준다.

"paths": {  
"@router/\*": \["src/router/\*"\],  
"@layouts/\*": \["src/layouts/\*"\],  
}

간단한 작업이지만 이런 작업이 코딩을 더 간편하게 만들고 코드를 더 깔끔하게 만드는 것 같다.