Vue) 절대경로 설정하기 @절대경로 사용할 수 있도록 설정

 

상대경로 : ../../assets/images/logo.png

절대경로 : @/assets/images/logo.png

 

상대경로는 현재페이지 기준으로 경로를 작성해야되므로 얼마나 ../을 써야할지 볼때 너무 귀찮다. 

그래서 복붙하기도 좋은 절대경로를 쓰는게 좋다. 

 

 

절대경로 Alias 설정

vue 설정파일을 연다.

나는 webpack.config.js 인데 각각 프로젝트별로 vue.config.js일수도있고, jsconfig.js일수도 있고 무튼 vue 루트 설정파일에서 작업한다. 

const path = require('path');

module.exports = {

  resolve: {
    alias: {
      '@': path.join(__dirname, 'src/')
    }
  },
 }

너무 간단하다. 위와 같이 적어주면된다. 

 

configureWebpack: {
    resolve: {
        alias: {
            '@': path.join(__dirname, 'src/')
        }
    }
}

처음에 이렇게 적었다가 webpack >= v2.0.0 no longer allows custom properties in configuration.

오류를 만났다. 나는 웹펙 5.X 버전을 쓰고있어서 바로 resolve로 선언해서 alias를 지정해주면 된다. 

 

 

 

절대경로로 사용하기

<img src="@/assets/imgages/logo.png" />

아주 잘 된다😄

 

혹시나 변수명과 함께 절대경로를 사용하고자하면 앞에 :src로 하고 require를 붙이면된다. 

<img :src="require(`@/assets/imgs/common/${img_url}`)" />