[Vue3/Vite] <v-img>

- 기존 VueCLI 가 아닌 Vite를 사용할 때 이미지가 가져와지지 않는다.

 

1) 실패 : 프로젝트 구조문제. (아래)

<v-img alt="Logo" src="../assets/test.png"></v-img>

 

2) 실패 : require은 webpack에서 지원하는 모듈이다.

 require(../image_path/${image.src})

 

Vite에서는 assets를 src폴더에서 관리하도록 되어있는 기존 구조를 사용할 수 없다. 

빌드시 dist폴더에 js,css,html 파일이 생성되는데, 이 때 src폴더에 있는 assets는 제대로 된 경로에 들어가지 못한다.

따라서 Vite에서는 assets 폴더를 public 폴더에 넣으라고 한다. 

 

public 디렉터리 

다음 에셋의 경우

• robots.txt와 같이 소스 코드에서 참조되지 않는 에셋
• 해싱 없이 항상 같은 이름을 갖는 에셋
• 또는 URL을 얻기 위해 굳이 import 할 필요 없는 에셋

 

- assets 폴더를 public 하위에 두면 정상적으로 불러와진다. 

 

공식문서 : 

https://ko.vitejs.dev/guide/assets.html#new-url-url-import-meta-url