[quasar] quasar config에서 경로 alias 설정하기

quasar 프로젝트, 아니 굳이 quasar가 아니더라도 프론트엔드 프로젝트를 진행하다보면 만들어놓은 컴포넌트와 애셋들을 불러올때
저렇게 지저분하게 ../../ 이런 경로를 써야할 때가 있는데요. 저런 길다란 경로들은 보기에 좋지 않을 뿐더러 개발할 때 헷갈리기 쉽습니다.
그래서 보통 그럴 때 경로 alias를 사용해서 import할 시 축약되어 간결한 방법으로 컴포넌트를 불러올 수 있는데요.

quasar에서 프로젝트 전반적인 설정은 quasar.conf.js에서 할수 있는데 이 alias도 마찬가지입니다.

quasar.conf.js에서는

• 전역으로 주입할 js파일 설정하기
• css 파일 설정
• quasar에서 지원하는 roboto 폰트, material icon, fontawesome icon을 추가하기
• quasar에서 만든 quasar 컴포넌트 api 추가하기
• IE(인터넷 익스플로러) 지원 설정 여부
• Typescript 설정 여부
• 빌드할 때 웹팩설정
• 개발서버 포트, https 설정
• 서버사이드렌더링, pwa 설정

등을 할 수 있는데요. 여기서 빌드할 때 웹팩설정 안에 경로 alias를 추가해 줄 수 있습니다. 

build: { 
extendWebpack (cfg) {
  cfg.resolve.alias = {
      ...cfg.resolve.alias,
      '@article': path.resolve(__dirname, './src/components/Article'),
      '@card': path.resolve(__dirname, './src/components/Card'),
      '@chart': path.resolve(__dirname, './src/components/Chart'),
      '@button': path.resolve(__dirname, './src/components/Button'),
  };
}

}

 

원하는 alias명 앞에 @표시를 붙이고 컴포넌트가 있는 디렉토리 경로를 설정하면 이제 @alias 로 모든 vue 파일에서 alias를 사용할 수 있습니다.