vue / 정적경로 단순화하기 public폴더 웹팩

nodejs라면 path모듈로 쉽게 해결을 하겠지만 vue는 js기반으로 돌아가서 경로처리를 어떻게 해야할지

궁금할것이다. 

배포를 고려하여 상대경로로 적어야하지만 이렇다면 컴포넌트마다 경로를 다르게해줘야할거다..

때문에 이를 포스팅한다.

 

 

# public / vue.config.js

const path = require("path");

module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias.set("@", path.resolve(__dirname, "public/"));
  },

나는 퍼블릭폴더경로를 단순화하고싶다.

vue.config.js에서 설정할수있는데 위 코드의 의미는

public폴더를 @로 단순화한다는 것이다.

 

 

# 컴포넌트에서 불러오기

    <img src="../../public/img/1.jpg" alt="" />
    <img src="@/img/1.jpg" alt="" />

위 코드 이미지태그의 src경로는 모두 같은 경로이다.

첫번째 이미지태그 src는 현재 컴포넌트에서 상대경로로 가져오지만,

두번째 이미지 태그 src는 @가 퍼블릭폴더를 의미하기에 간략하다.

컴포넌트가 아~주 많아서 상대경로 입력이 ㅈ같을경우 이렇게 하면 된다.