티스토리 뷰

Web/Vue

[Vue] public folder 접근하기

해구름 2024. 7. 31. 12:30
반응형

Vue 앱 개발 시 public 폴더에 이미지 등의 정적 파일을 저장할 수 있습니다. public 폴더에 저장된 파일들은 webpack에 의해 처리되지 않기 때문에, Vue 앱 개발 시 public 폴더의 파일에 접근하려면 특별한 접근방법이 필요합니다.

public 폴더 내부 파일 접근

public/index.html 파일에서 접근

public/index.html 파일에서는 <%= BASE_URL %>를 통해 pbulic 폴더의 파일에 접근할 수 있습니다.

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

Vue 파일에서 접근

Vue 파일에서는 process.env.BASE_URL을 통해서 public 폴더에 접근할 수 있습니다.

  1. vue 파일 내부에서 public 폴더경로 정의 
    data () {
    return {
        publicPath: process.env.BASE_URL
    }
}
  2. <Template>에서 사용 
    <img :src="`${publicPath}image.png`">

<style>에서 접근

<style>에서 public 폴더에 접근하려면 v-bind()를 사용해주세요.

  1. public 폴더경로 정의 
    data () {
    return {
        fileImageUrl: 'url(' + process.env.BASE_URL + 'file.gif)'
    }
}
  2. <style>에서 v-bind() 사용 
    .fileIcon { background-image: v-bind(fileImageUrl); }

public 폴더 내 css파일을 이용하는 방법

public 폴더에 .css 파일을 생성하여 public 폴더 이미지에 접근하는 방법도 있습니다.

  1. css파일 추가
    css 파일 추가
  2. index.html에서 css파일 참조 추가 
    <!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <link href="<%= BASE_URL %>app.css" rel="stylesheet">
    </head>
    <body>
        ...
  3. css파일에서 public 폴더 이미지 사용 
    
						.icon-file { background-image: url('img/file.gif');  }
  4. Vue App 내에서 CSS Selector 사용 
    <template>
    <span class="icon-file"></span>
</template>

개발 권장사항

Vue에서는 public 폴더에 파일들을 저장하기 보다는 Vue 프로젝트의 src폴더에 저장하는 방법을 권장하고 있습니다. 그럼 언제 public 폴더를 사용하고 언제 src폴더를 사용해야할까요?

scr 폴더에 정적파일 저장 시 장점

  • Vue 앱이 빌드 되면서 정적 파일들은 압축되고(Minified), 적절한 형태로 변한되어 묶이기 때문에(Bundling) 네트워크 트래픽 사용이 최소화 되고 로드속도를 높일 수 있습니다.
  • 잘못된 파일 경로를 입력하거나 파일누락이 발생하는 경우 컴파일 단계에서 오류가 발생합니다. 따라서 개발자의 실수를 최소화 할 수 있습니다.
  • 파일명에는 Contnet hash가 포함되기 때문에 브라우저 캐시에 의해 과거 파일들이 출력되는 문제를 막아줍니다. 파일이나 이미지가 수정되더라도 항상 최신 리소스가 출력되도록 보장해줍니다.

public 폴더에 저장해야하는 경우

  • 정적파일이 업데이트 되거나 파일경로 변경이 없다고 보장되는 경우
  • 압축이나 난독화 되어서는 안되고, 원본 파일 그대로 제공되어야 하는 경우
  • 파일경로나 파일명이 중요한 의미를 가지기 때문에, 경로나 파일명이 그대로 제공되어야 하는 경우
  • 대상 파일의 수가 많거나 파일크기가 커서 Webpack에 의해 처리되는 것이 부적절한 경우
  • Vue 앱 외에 다양한 곳에서 공유되는 파일인 경우

References

저작자표시 비영리 동일조건

'Web > Vue' 카테고리의 다른 글

[Vue3] 변경사항  (0) 2024.01.26
공유하기 링크
댓글