Vite 정적 파일 세팅

Views:
6
Category:
Post
Posted on:
2024. 4. 10.

Vite 정적 파일 세팅

Vite React 프로젝트를 진행중 assets 폴더의 비디오 파일이 불려오지 않았다..

vite 프로젝트의 src/assets를 사용 하는 경우

import fileName from "상대경로/fileName";

const App = () => {
    ...
    return (
        <>
            <video>
                <source src={fileName}/> 
            </video>
        </>
    );
}

이렇게 사용하고,

vite 프로젝트의 public 폴더를 사용하는 경우

⚠️ assets 폴더를 public 밑으로 위치 시키고 절대경로로 접근해야 함.

⚠️ javascript로 mport 할 수 없다.

//* public/assets/...
const App = () => {
    ...
    return (
        <>
            <video>
                <source src="/assets/경로/fileName.mp4" type="video/mp4"/> 
            </video>
        </>
    );
}

이렇게 사용 하면 작동한다.

[참조1] [참조2]
# Vite 정적 파일 세팅
Vite React 프로젝트를 진행중 assets 폴더의 비디오 파일이 불려오지 않았다..

### vite 프로젝트의 src/assets를 사용 하는 경우
```js
import fileName from "상대경로/fileName";

const App = () => {
    ...
    return (
        <>
            <video>
                <source src={fileName}/> 
            </video>
        </>
    );
}
```
이렇게 사용하고,

### vite 프로젝트의 public 폴더를 사용하는 경우
⚠️ assets 폴더를 public 밑으로 위치 시키고 절대경로로 접근해야 함.

⚠️ javascript로 mport 할 수 없다.
```js
//* public/assets/...
const App = () => {
    ...
    return (
        <>
            <video>
                <source src="/assets/경로/fileName.mp4" type="video/mp4"/> 
            </video>
        </>
    );
}
```
이렇게 사용 하면 작동한다. 

<a href="https://vitejs.dev/guide/assets.html#the-public-directory" target="_blank">
[참조1]
</a>
<a href="https://www.answeroverflow.com/m/1195197417025445959" target="_blank">
[참조2]
</a>