vue.js의 path에 들어가있는 '@'는 무슨 뜻일까?

<script>
import "@/assets/images/icons_ustra/icon_asterisk.svg";
import "@/assets/images/icons_ustra/icon_operations_search.svg";
import "@/assets/images/icons_ustra/icon_status_checkmark_filled.svg";
import "@/assets/images/icons_ustra/icon_status_checkmark_outline.svg";
import "@/assets/images/icons_ustra/icon_formatting_attachment.svg";
</script>

 

vue.js에서 path에 '@'가 들어가 있는 걸 본 적이 있다.

'@'는 무슨 뜻일까?

 

 

 

const path = require('path');

module.exports = {
    // 웹팩 설정
    configureWebpack: {
        // resolve.alias는 모듈을 더 쉽게 import, require 하게 만듭니다.
        resolve: {
            alias: {
                // '@'는 현재 프로젝트의 client/src/까지의 최종 경로를 의미합니다.
                '@': path.join(__dirname, 'src/')
            }
        }
    }
}

 

Node.js에서 __dirname 은 현재 실행하는 파일의 절대경로를 말합니다.

Vue.js에서 경로를 사용할 때(img, import, require 등) webpack bundle 때 '@'라는 경로를 src/ 경로로 바꿔주는 설정입니다.

webpack에서 이렇게 '@'는 src/ 경로라고 기본적으로 설정을 해주면 수시로 경로를 입력해야하는 불편한 요소가 해결됩니다.

 

 

 

<script>
import "../../../assets/images/icons_ustra/icon_asterisk.svg";
import "../../../assets/images/icons_ustra/icon_operations_search.svg";
import "../../../assets/images/icons_ustra/icon_status_checkmark_filled.svg";
import "../../../assets/images/icons_ustra/icon_status_checkmark_outline.svg";
import "../../../assets/images/icons_ustra/icon_formatting_attachment.svg";
</script>

 

경로 값을 '@'에 담아두지 않았다면 이런식으로 사용하고 있었을지도 모르겠다.