작성일자 글쓴이 thkmon

[Vue.js] import 상대경로를 절대경로로 변경

[Vue.js] import 상대경로를 절대경로로 변경 

Vue.js 에서 일반적인 import 문은 다음과 같은 형태를 갖는다.

import CommonUtil from ‘../../resources/js/common’;

이렇게 js 또는 vue 파일의 경로를 상대경로로 적으면 가독성이 떨어지고, 다른 파일에 붙여넣어서 작업할 때 일일히 경로를 보정해줘야 하므로 오류성도 높다.

Vue.js 에서 import 또는 require 구문의 상대경로를 절대경로로 변경하려면 webpack.config.js 파일을 수정해야한다.

webpack.config.js

[AS-IS]

resolve: {
    alias: {
        ‘vue$’: ‘vue/dist/vue.esm.js’
    },
    extensions: [‘*’, ‘.js’, ‘.vue’, ‘.json’]
},

[TO-BE]

resolve: {
    alias: {
        ‘vue$’: ‘vue/dist/vue.esm.js’,
        ‘~’: path.resolve(__dirname, ‘src’)
    },
    extensions: [‘*’, ‘.js’, ‘.vue’, ‘.json’]
},

이제 Vue 파일 내의 import 구문을 아래와 같이 바꿔 사용할 수 있다.

[AS-IS]

import CommonUtil from ‘../../resources/js/common’;

[TO-BE]

import CommonUtil from ‘~/resources/js/common’;

참고사이트 : https://wonism.github.io/resolve-import-path/