[Vite] public 폴더 활용

React와 Vue를 통해 특정 솔루션을 출력해야 하는 상황이 생겼다.

그동안 개인 프로젝트를 진행할 때와 달리 모듈화되지 않은 jQuery 소스와 솔루션 전용 js파일 등을 import 하고, 폴더 구조도 전달받은 샘플 기준에 맞추다보니 빌드 후 css 및 js 파일 로딩 경로가 다 틀어져버렸다.

 

원인

전달받은 샘플 기준으로 최상위 index 파일에서 스크립트를 불러오기 위해 다음과 같이 코드를 작성했다.

 

하지만 이럴 경우 빌드 후 dist 폴더가 생성되었을 때 lib 폴더에 접근하지 못하는 문제가 있었다.

ROOT 경로의 lib 폴더는 빌드 목록에 포함되지 않기 때문에 npm run dev 명령어를 통해 개발 모드 서버에서 확인하면 정상적으로 출력되지만 npm run preview 명령어를 통해 빌드 결과물을 확인해보면 lib 폴더가 제외된 것을 확인할 수 있다.

 

해결 방법

다른 방법이 있을 수도 있지만 간단한 방법은 public 폴더를 하나 생성해 그 안으로 lib 폴더를 옮겨주는 것이다.

Vite 환경에선 기본적으로 public 폴더에 포함된 파일을 함께 빌드하기 때문에 dist 폴더 내부에 lib 폴더가 포함되도록 빌드함으로써 경로 문제를 해결할 수 있다.

 

참고로 public 폴더 관련 경로는 절대경로로 지정하는 것이 안전하다.

public 폴더의 파일들은 빌드 후 원본이 그대로 dist 폴더에 저장되는데, dist 폴더는 또 다른 ROOT 경로라고 볼 수 있기 때문에 개발 과정에서 상대 경로로 참조하게 되면 빌드 후 또 다시 경로가 틀어질 가능성이 있기 때문이다.

 

이 부분은 추후 빌드 과정이나 src 폴더와의 차이점을 다룰 기회가 있을 때 자세히 다뤄보겠다.